为什么输入数字不会“移动”颜色？

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 语句，而只需运行循环以清除所有颜色，然后设置绿色。

Answer 2

您的 if 语句将始终导致执行相同的块，因为您将 current 设置为 rcvVal.value - 1，然后检查 current 现在是否为 rcvVal.value - 1。

你可以这样简化：

  var current = rcvVal.value - 1; //-1 for position 0

  // Iterate all of input.arr
  sel.forEach((node, index) => {

    // Check if current corresponds to the index
    // of the input.arr elements array
    if (index == current) node.style.background = "#0D0";

    else node.style.background = "lightblue";
  })

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
  sel.forEach((node, index) => {
    if (index == current) node.style.background = "#0D0";
    else node.style.background = "lightblue";
  })
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 3

另一种方式，不检查条件

var ini = document.getElementById("ini");
var arr = document.getElementsByClassName("arr");

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

function selector() {
  for (var i = 0; i < arr.length; i++) {
    arr[i].style.background = "lightblue"; //go back to page previous/default color
  }
  arr[ini.value - 1].style.background = "#0D0";
  document.getElementById("demo").innerHTML = "position: " + ini.value + "/" + arr.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;
}

<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 4

您可以使用.splice()从使用.slice()创建的数组中排除索引rcvVal.value - 1处的.arr，将数组background的元素设置为"lightblue"

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

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

function selector() {
  var current = rcvVal.value - 1; //-1 for position 0
    sel[rcvVal.value - 1].style.background = "#0D0";
    var not = Array.prototype.slice.call(document.querySelectorAll(".arr"));
    not.splice(rcvVal.value - 1, 1);
    not.forEach(function(el) {
      el.style.background = "lightblue";
    })
 
  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>