Warum die Eingangsnummer die Farbe nicht "verschiebt"?

Question

Dies ist ein Versuch, das mit vanille JS ausgewählte Eingabefeld anzuzeigen, könnte nur daran denken, Hintergrundfarben zu ändern.

Als Anfänger weiß ich nicht, ob ich es die beste Struktur mache. Hört sich aber leichter an, in meinem persönlichen Projekt werden noch mehr Felder sein.

Jetzt muss ich nur die Funktion halten eine Farbe zu einer Zeit und nicht alle auf einmal zu wählen. Ich habe viele Versuche mit bedingten Anweisungen und Unterfunktionen unternommen, aber bisher keinen Erfolg.

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

eine andere Art und Weise, ohne Bedingung Überprüfung

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

Es ist, weil Sie current = rcvVal.value - 1 gesetzt, und dann sofort überprüfen, ob current-rcvVal.value - 1 gleich ist. Natürlich stimmt das immer, also wird die Schleife, die die Farben in Ihrer else-Klausel zurücksetzt, nie erreicht.

Sie sollten die if/else-Anweisung loswerden und stattdessen einfach die Schleife ausführen, um alle Farben zu löschen, und dann die grüne Farbe festlegen.

Answer 3

können Sie ausschließen .arr bei Index rcvVal.value - 1.splice() aus einem Array mit .slice() erstellt mit, stellen Sie die Elemente der Matrix background zu "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

Ihre if-Anweisung wird immer in der Folge Derselbe Block wird ausgeführt, seit Sie current auf rcvVal.value - 1 setzen und dann prüfen, ob current jetztist.

Man könnte es vereinfachen, wie so:

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>