Pourquoi le numéro d'entrée ne "déplace" pas la couleur?

Question

Ceci est une tentative d'afficher le champ de saisie sélectionné avec vanille JS, juste pourrait penser à changer les couleurs d'arrière-plan.

En tant que débutant, je ne sais pas si je le fais la meilleure structure. Mais cela me semble plus facile, dans mon projet personnel, il y aura encore plus de champs.

Maintenant, j'ai juste besoin de faire en sorte que la fonction garde une couleur à la fois et ne pas tout sélectionner en même temps. J'ai fait beaucoup de tentatives avec des instructions conditionnelles et des sous-fonctions mais pas de succès jusqu'à présent.

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

une autre façon, sans vérifier l'état

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

C'est parce que vous définissez current = rcvVal.value - 1, puis immédiatement vérifier si current est égal à rcvVal.value - 1. Bien sûr, c'est toujours vrai, donc la boucle qui réinitialise les couleurs dans votre clause else n'est jamais atteinte.

Vous devriez vous débarrasser de l'instruction if/else et simplement lancer la boucle pour effacer toutes les couleurs, puis définir la couleur verte.

Answer 3

Vous pouvez exclure .arr à l'index rcvVal.value - 1 utilisant .splice() d'un tableau créé à l'aide .slice(), définissez les éléments du tableau 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

Votre instruction if donnera toujours la même bloc en cours d'exécution puisque vous avez défini current sur rcvVal.value - 1, puis vérifiez si current est maintenant rcvVal.value - 1.

Vous pouvez simplifier comme ceci:

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>