javascript - 为什么输入的数字不是 "move"的颜色？

Question

这是一次尝试显示使用 vanilla JS 选择的输入字段，只是可以考虑更改背景颜色。

作为初学者，我不知道我是否正在做最好的结构。但对我来说听起来更容易，在我的个人项目中将会涉及更多领域。

现在我只需要让函数一次保留一种颜色，而不是一次选择所有颜色。我对条件语句和子函数进行了多次尝试，但到目前为止没有成功。

pointer/selector image for index JS fiddle

var sel = document.querySelectorAll("input.arr");
var rcvVal = document.getElementById("ini");
var ini = document.getElementById("ini");
var arrLength = document.getElementsByClassName("arr");

ini.addEventListener("click", selector, true);

function selector() {
  var current = rcvVal.value - 1; //-1 for position 0
  if (rcvVal.value - 1 == current) {
    sel[rcvVal.value - 1].style.background = "#0D0";
    }else{
      for (var i = 0; i <= arrLength.length; i++) {
        sel[i].style.background = "lightblue";//go back to page previous/default color
      }
 }
  document.getElementById("demo").innerHTML = "position: " + rcvVal.value + "/"+arrLength.length;
  //check position/length
}

selector(); //First run

input {
  width: 50px;
  background: lightblue;
  /*default color*/
  border-style: none;
  opacity: 1;
}

input[type=number]::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  opacity: 1;
    padding:3px 3px;  
}

Move one green color among input fields <br>
<input style=background:#E70; type="number" value="3" id="ini" class="first" min="1" max="5"> Selector
<br>
<br>
<input type="number" value="10" class="arr">
<input type="number" value="20" class="arr">
<input type="number" value="30" class="arr">
<input type="number" value="40" class="arr">
<input type="number" value="50" class="arr">

<p id="demo"></p>

Answer 1

这是因为您设置了 current = rcvVal.value - 1，然后立即检查 current 是否等于 rcvVal.value - 1 。当然，这总是正确的，因此永远不会到达在 else 子句中重置颜色的循环。

您应该摆脱 if/else 语句，而只需运行循环来清除所有颜色，然后设置绿色。