Javascript 基于滑块值更改按钮的背景

我正在尝试创建一个按钮，根据滑块的值更改颜色。当页面加载时，它应该为黄色，如果值=1，则为红色，如果值=2，则为蓝色，如果值=3，则为绿色

现在不管值是多少，按钮都会变成红色。我错过了什么

html:

---

您使用的是

=

来比较值，而不是

=

；这将始终为真（使其始终使用第一个

if

分支），并且还将您的变量设置为您要测试的值

您还需要使用

y.value

而不仅仅是

y

，以便获得输入的值，而不是元素本身

固定代码：

Html:

---

您使用的是

=

来比较值，而不是

=

；这将始终为真（使其始终使用第一个

if

分支），并且还将您的变量设置为您要测试的值

您还需要使用

y.value

而不仅仅是

y

，以便获得输入的值，而不是元素本身

固定代码：

Html:

---

在iff语句中，您分配的是值，而不是比较 改为：

 var x = document.getElementById("demo");
 var y = parseInt(document.getElementById("demorange").value);
 if (y === 1) { 
   x.style.background = "red";
 } else if (y === 2) { 
   x.style.background = "blue";
 } else if (y === 3) {
   x.style.background = "green";
 }

---

等等。

在iff语句中，您分配的值不进行比较 改为：

 var x = document.getElementById("demo");
 var y = parseInt(document.getElementById("demorange").value);
 if (y === 1) { 
   x.style.background = "red";
 } else if (y === 2) { 
   x.style.background = "blue";
 } else if (y === 3) {
   x.style.background = "green";
 }

等等。

两件事：

• 布尔条件等于

  ==

  。你有

  =

• y是元素，而它应该是元素的值。因此需要将

  y=document.getElementById（“demorange”）

  替换为

  y=document.getElementById（“demorange”）.value

那为什么它会变成红色呢？

在javascript中，表达式

y=1

将返回值

1

在布尔表达式中，

1

与true

true

因此表达式

如果（y=1）{..}

将被计算为true，

两件事：

• 布尔条件等于

  ==

  。你有

  =

• y是元素，而它应该是元素的值。因此需要将

  y=document.getElementById（“demorange”）

  替换为

  y=document.getElementById（“demorange”）.value

那为什么它会变成红色呢？

在javascript中，表达式

y=1

将返回值

1

在布尔表达式中，

1

与true

true

---

因此表达式

如果（y=1）{..}

的计算结果为true，

您应该使用y.value来获取输入按钮内的数据，并且您还应该在布尔语句中使用“==”，而不是在声明中使用的“=”

像这样：

  if (y.value == 1) { 
    x.style.background = "red";
  } else if (y.value == 2) { 
    x.style.background = "blue";
  } else if (y.value == 3) {
    x.style.background = "green";
  }
}

---

您应该使用y.value来获取输入按钮内的数据，还应该在布尔语句中使用“==”，而不是在声明中使用“=”

像这样：

  if (y.value == 1) { 
    x.style.background = "red";
  } else if (y.value == 2) { 
    x.style.background = "blue";
  } else if (y.value == 3) {
    x.style.background = "green";
  }
}

---

if（y=1）

应该是

if（y.value==1）

，对于其他条件也是如此。更简单的方法是

x.style.background={1:“红色”，2:“蓝色”，3:“绿色”}[y.value]

@Xufox新手像新手一样进行研究，如果有人不了解代码不起作用的基本原理，他们将不知道如何研究如何使其起作用。我不认为缺乏知识是将答案标记为低质量的适用推理，这是网站的重点，不是吗？尽管如此，它也不值得投票。@N.J.Dawson我同意研究是一件很难对付新手问题的事情。如果他们知道自己的问题，在这样一个基本的水平上，他们也会知道如何解决它，而不需要研究它。他们不能研究它，因为他们不知道。对于基本问题，他们真的无法研究它，他们只需要学习它，就像他们在这里所做的那样。@Xufox是的。…

if（y=1）

应该是

if（y.value==1）

，对于其他条件也是如此。更简单的方法是

x.style.background={1:“红色”，2:“蓝色”，3:“绿色”}[y.value]

@Xufox新手像新手一样进行研究，如果有人不了解代码不起作用的基本原理，他们将不知道如何研究如何使其起作用。我不认为缺乏知识是将答案标记为低质量的适用推理，这是网站的重点，不是吗？尽管如此，它也不值得投票。@N.J.Dawson我同意研究是一件很难对付新手问题的事情。如果他们知道自己的问题，在这样一个基本的水平上，他们也会知道如何解决它，而不需要研究它。他们不能研究它，因为他们不知道。对于基本问题，他们真的无法研究它，他们只需要学习它，就像他们在这里所做的那样。@Xufox是的…@Xufox修复了它。@Xufox修复了它。thanx指出这一点，我想我掩盖了代码的那一部分，因为thanx指出了这一点，我想我掩盖了代码中明显错误的那一部分

 var x = document.getElementById("demo");
 var y = parseInt(document.getElementById("demorange").value);
 if (y === 1) { 
   x.style.background = "red";
 } else if (y === 2) { 
   x.style.background = "blue";
 } else if (y === 3) {
   x.style.background = "green";
 }

function myFunction() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demorange").value;
  if (y== 1) { 
    x.style.background = "red";
  } else if (y== 2) { 
    x.style.background = "blue";
  } else if (y== 3) {
    x.style.background = "green";
  }
}

  if (y.value == 1) { 
    x.style.background = "red";
  } else if (y.value == 2) { 
    x.style.background = "blue";
  } else if (y.value == 3) {
    x.style.background = "green";
  }
}