javascript - addEventListener with an array of input

Question

I need to use addEventListener for automatically updating the values typed into different input text (actually 4 input tags)

Here's the HTML code :

<td class="col-md-4">
        <label for="lab1"><b>$\mathbf{M_{1}}$</b></label>                                
        <input type="text" class="form-control input-sm" id="lab1" />                    
      </td>
        <td class="col-md-4">                                                            
        <label for="lab2"><b>$\mathbf{M_{2}}$</b></label>
        <input type="text" class="form-control input-sm" id="lab2"  />                   
      </td>
    <td class="col-md-4">                                                                
        <label for="lab3"><b>$\mathbf{M_{3}}$</b></label>                                
        <input type="text" class="form-control input-sm" id="lab3" />                    
      </td>
      </tr>
   <tr>                                                                                  
       <td class="col-md-4">                                                             
        <label for="lab4"><b>$\mathbf{\Theta_{1}}$</b></label>                           
        <input type="text" class="form-control input-sm" id="lab4" />                    
      </td>

I would like to update values when they are modified, without having to click outside the input.

I tried to use the following addModifyEvent function in main :

    function addModifyEvent() {                                                              

     var inputList = document.querySelectorAll('input.form-control');   

    for (var i=0; i<inputList.length; i++)                                                   
     {  
    inputList[i].addEventListener('input', function()                                        
        {   
console.log(inputList[i].value);  });
    }       
    }     

but it doesn't work ( I get TypeError: inputList[i] is undefined).

I don't know if I shoud better do :

inputList[i].addEventListener('inputList['+i+']', 

or something closed instead of

inputList[i].addEventListener('input', 

I want to add an eventlistener for each input tag.

Anyone could tell me the right syntax ?

Thanks

Answer 1

As you can see in example i printed 2 console one for your input and one for your i

So your problem is:

when in listener function you are trying to access console.log(inputList[i].value); so at that time your i is 4 and your input array length is 0-3 and because of for loop i will be incremented to 4 so you got undefined because inputList[4] is not present in your array.

Working example:http://jsfiddle.net/kevalbhatt18/gqce9htx/

var input = document.querySelectorAll('input');
  console.log(input)
   for(var i=0;i<input.length;i++){
      input[i].addEventListener('input', function()
      {  
         console.log(input)
         console.log(i)
         console.log('input changed to: ', this.value);
      });

 }

debugg your error example:http://jsfiddle.net/kevalbhatt18/gqce9htx/2/