Question

所以我试图根据用户从下拉菜单中选择的选项来更改图像。我现在的图像是“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];
}

你能帮我理解问题是什么，以及如何解决。

Answer 1

如果你在window.onload绑定你的功能，它只会在Windows加载时触发一次。您可能希望将其绑定在select onchange事件上。

E.g：

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，所以为了简单起见，我将在你的select中添加一个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>

使用Javascript从选择字段更改图像

1 个答案: