How to use a loop assigning values to inputs depending on another input?

[tonydeleonsuero]

I’ like that when changing #master , the values ​​in the 8 inputs “.bla” change as follow, for example: if were #master = 8, each value on “.bla” = 2, if #master = 7 then, 7 “.bla” = 2 and the last one 0 and so.

<input id="master" value="7">

<input class="bla" value="">  (2) 
<input class="bla" value="">  (2)
<input class="bla" value=""> (2)
<input class="bla" value=""> (2)
<input class="bla" value=""> (2)
<input class="bla" value=""> (2)
<input class="bla" value=""> (2)
<input class="bla" value=""> (0) 

$(document).ready(function(){
var x = $("#master").val();
var z = 0 ;
var i ;
for (i = 0; i <= x ; i++) {
z += x[i];
 }

$("#master").change(function(){
   $('.bla').val( z ) ;        
 });

});

[m_hutley]

parseInt
nth-child

[m3g4p0p]

Hi @tonydeleonsuero, you can use jQuery’s .each() method to iterate over the .bla elements, and compare the current index to the master value; as @m_hutley noted, you’ll have to convert it to a number first though (using either parseInt() or Number(), or cast it using the + operator):

$('#master').change(function (event) {
  var masterValue = +event.target.value

  // Guard against failed casting
  if (typeof masterValue !== 'number') return
  
  $('.bla').each(function (index, current) {
    // Set the current value to 2 or 0 depending 
    // on the current index and the master value
    current.value = (index < masterValue) ? 2 : 0
  })
})

Not quite sure what you’re trying to achieve in the for loop though… you’re concatenating the characters of the master value from position 0 to 7 (all of which but the first are undefined here) to “0”, which will be

07undefinedundefinedundefinedundefinedundefinedundefinedundefined

As JS is loosely typed, there’s a lot of implicit casting going on… you have to be really careful with this.