javascript - 从选择值属性更改图像源

Question

我正在尝试根据下拉菜单中的值更改图像源，但由于某种原因，我使用的代码似乎不起作用。

html

<select id="strapOptions">
<option value="black">Black Strap</option>
<option value="white">White Strap</option>
</select>
<button type="button" onclick="chooseStrapColour()">Apply Strap</button> 

Javascript

function chooseStrapColour() {
var black = "images/straps/oxford-black.png"
var white = "images/straps/oxford-white.png"
var colourRange = document.getElementById("strapOptions").value;
document.getElementById("oxStrap").src = colourRange;
}

如果我将第 5 行末尾的 src = 更改为“黑色”或“白色”，那么它确实会更改图像源 url，因此我怀疑是第 4 行中的某些内容破坏了它。

Answer 1

得到colourRange后，它的值就是"black"或"white"，你需要用它来进一步决定要放入 src 的字符串，而不是该值:

function chooseStrapColour() {
   var black = "images/straps/oxford-black.png"
   var white = "images/straps/oxford-white.png"
   var colourRange = document.getElementById("strapOptions").value;
   var src = (colourRange === "white") ? white : black;
   document.getElementById("oxStrap").src = src;
}