爲什麼輸入數字不會「移動」顏色？

Question

這是一個嘗試顯示與香草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

另一種方式，沒有檢查條件

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 2

這是因爲你設置current = rcvVal.value - 1，然後馬上檢查是否current等於rcvVal.value - 1。當然，情況總是如此，因此永遠不會達到重置else子句中顏色的循環。

您應該擺脫if/else語句，而是運行循環清除所有顏色，然後設置綠色。

Answer 3

您可以在指數使用從陣列.splice()rcvVal.value - 1排除.arr使用.slice()創建陣列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>

Answer 4

你的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>