Question

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

现在无论什么值，按钮都会变为红色。我错过了什么？

HTML：

<input type="button" id="demo" style="background: yellow">
<input id="demorange" type="range" min="1" max="3" onchange="myFunction()">

JS：

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

Answer 1

您正在使用</text>来比较值，而不是<g>;这将始终为真（使其始终使用第一个=分支）并将您的变量设置为您正在测试的值！

您还需要使用==而不是if，这样您才能获得输入的值，而不是元素本身。

固定代码：

HTML：

y.value

JS：

Answer 2

https://plnkr.co/edit/En8G8MkjDLBFMNbGNwC1?p=preview

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";
  }
}

一些事情：

布尔条件等于==。你有=
y是元素，而它应该是元素的值。所以需要将y=document.getElementById("demorange")替换为y=document.getElementById("demorange").value

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

在javascript中，表达式y=1将返回值1。

在布尔表达式中，1与true true

相同

因此表达式if (y=1){ .. }将被评估为true，

Answer 3

在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";
 }

等...

Answer 4

你应该使用 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";
  }
}

根据滑块值更改按钮的背景

4 个答案: