0

そのため、ユーザーがドロップダウン メニューから選択したオプションに基づいて画像を変更しようとしています。今のところ私の画像は「cyan.png」「magenta.png」「yellow.png」「black.png」「fuschia.png」です。

私のHTML

<select name="color" multiple>
<option>Cyan</option>
<option>Magenta</option>
<option>Yellow</option>
<option>Black</option>
<option>Fuschia</option>
</select>

マイ JavaScript

// This part tries to load all images onto the carArray variable
var nameArray = new Array("cyan.png", "magenta.png", "yellow.png", "black.png", "fuschia.png");
var carArray = new Array;

for(var i = 0; i < carArray.length; i++) {
    carArray[i] = new Image;
    carArray[i].src = nameArray[i];
}

// This part tries (and fails) to change the image when the user selects a color from a dropdown menu
window.onload = function() {
    var colorPicker = document.getElementsByName("color").selectedIndex;
    var options = document.getElementsByName("color").options;

    document.getElementById("photo").src = carArray[options[colorPicker];
}

何が問題なのか、どのように修正するのかを理解するのを手伝っていただけませんか。

4

1 に答える 1

1

関数を にバインドするwindow.onloadと、ウィンドウの読み込み時に一度だけ起動します。onchangeおそらくselectイベントにバインドしたいと思うでしょう。

例えば：

function pickColor() {
    var colorPicker = document.getElementsByName("color").selectedIndex;
    var options = document.getElementsByName("color").options;

    document.getElementById("photo").src = carArray[options[colorPicker]];
}

<select name="color" onchange="pickColor()" multiple>
...

@LightStyle が示唆するように、インライン イベントの割り当ては避ける必要があります。あなたの DOM がわからないので、簡単にするために、id (ページ内で一意である必要があります) を select に追加します。その後、次のことができます。

document.getElementById('color').onchange = function() {
    var colorPicker = document.getElementsByName("color").selectedIndex;
    var options = document.getElementsByName("color").options;

    document.getElementById("photo").src = carArray[options[colorPicker]];
}

<select name="color" id="color" multiple>
于 2013-07-23T21:07:25.867 に答える