Javascript 使用onchange事件获取选择颜色列表的值以更改图片

我正在使用选择列表更改衬衫图片预览图像的颜色。因此，我有一个名为chosenColor的全局变量，我想在从选择列表中选择颜色时使用它来更改图片。它只能将颜色更改为蓝色，但无法将颜色更改回红色

这是相关的javascript

var chosenColor="Red";

function chooseBlue() {
     document.getElementById("largerview").src = "bluezigzag.jpg";
     chosenColor = "Blue";
     }

function chooseRed() {
     document.getElementById("largerview").src = "redzigzag.jpg";
     chosenColor = "Red";
     }


function getSelectionChange() {      //selects the color that the user selects in the selection list
     if (this.value = "red") {
         chooseBlue();
         window.alert(chosenColor);
     }
     else if (this.value = "blue") {
         chooseRed();
         window.alert(chosenColor);
     }
}

这是选择列表

<select size="1" name="color" onchange="getSelectionChange();">
     <option value="red">Red</option>
     <option value="blue">Blue</option>
</select>       

红色
蓝色

---

您正在使用赋值运算符

=

而不是比较运算符

==

或

=

：

if (this.value = "red") {

...

else if (this.value = "blue") {

应该是

if (this.value === "red") {

...

else if (this.value === "blue") {

使用

this.value=“red”

时，它将值设置为

“red”

，然后表达式返回

“red”

——这是真实的，因此执行进入该if块

您是否考虑过将单独的“选择颜色”功能替换为以下功能：

function getSelectionChange() {
     document.getElementById("largerview").src = this.value + "zigzag.jpg";
     window.alert(this.value);
}

显然，您仍然可以设置一个全局

chosenColor

变量，但我不确定您需要它做什么

编辑：另外，如果您使用内联

onchange=

处理程序调用函数，

此

将是

onchange

属性代码中有问题的元素，但不是从那里调用的函数中的元素，除非您显式设置它：

onchange="getSelectionChange.call(this);"

---

+1对于后面的部分，这就是我自己（现在已删除）的答案。哈，真不敢相信我犯了那个错误。我需要在头脑中开始思考“得到”和“平等”，这样我就不会把它们弄糊涂了。是的，我需要chosenColor变量来做其他的事情。但是现在我纠正了我的错误，把它改成===这个函数什么都不做。是的，请看我的编辑。它以前“起作用”的原因是

这个

实际上是

窗口

所以

这个.value

是

未定义的

——但是

这个.value=“red”

正在创建一个全局变量并执行

if

块。您需要确保

此

实际上是有问题的元素。