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，它只会在 Windows 加载时触发一次。您可能希望将其绑定到 selectonchange事件上。

例如：

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（它在页面中必须是唯一的）。然后，您可以执行以下操作：

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 回答