3

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

Improve this question

6 Answers 6

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

The context of the event handler is the input element the event is fired on. Replace the inputList[i] with this:

console.log(this.value);
Improve this answer

Comments

0

A slightly modified version of your code that uses this.value works just fine:

function addModifyEvent() {
    var inputList = document.querySelectorAll('input.form-control');
    for (var i = 0; i < inputList.length; i++) {
        inputList[i].addEventListener('input', function () {
            console.log(this.value);
        });
    }
}

Demo: http://jsfiddle.net/jfriend00/9ny3wcxu/

You can't refer to inputList[i] inside the event handler because by the time the event handler is called (sometime later) the for loop has already finished running so i points past the end of the inputList HTMLCollection object.

You can solve the problem by just using this as a pointer to the object that caused the event and thus this.value is the value of the input field that has just been modified.

Improve this answer

Comments

0

At the time the event fires,

console.log(inputList[i].value);

inputList[i] will not be valid as it was part of the for loop used to bind event listeners.

Use this to get the current element on which the event was fired,

console.log(this.value);

Full code

function addModifyEvent() {
    var inputList = document.querySelectorAll('input.form-control');
    for (var i = 0; i < inputList.length; i++) {
        inputList[i].addEventListener('input', function () {
            console.log(this.value);
        });
    }
}
Improve this answer

Comments

0

You can use closures (if not familiar, please search it and read a bit). The code goes as below:

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

Basically the value of i remains intact within the function. This is required whenever you do something in a loop that is Async.
The benefit being that you do not need to change the way you access values, except that you need to enclose them within a closure function.
Hope this solves you issue without any changes in the way to want to access the array.

Improve this answer

Comments

0 
var inputElem = document.getElementsByTagName('input');

for(var i = 0; i < inputElem.length; i++) {
inputElem[i].addEventListener('click', function(){
    alert(this.value);
}, false);
}
Improve this answer

1 Comment

It would be better if you explain in more detail why your code works and edit the code's format of your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.