javascript - 带有输入数组的addEventListener

Question

我需要使用 addEventListener 自动更新输入不同 input text 的值(实际上是 4 个 input 标签)

这是 HTML 代码:

<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>

我想在修改值时更新它们，而不必在 input 之外单击。

我尝试在 main 中使用以下 addModifyEvent 函数:

    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);  });
    }       
    }     

但它不起作用(我得到 TypeError: inputList[i] is undefined)。

我不知道我是否应该这样做:

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

或关闭的东西而不是

inputList[i].addEventListener('input', 

我想为每个输入标签添加一个事件监听器。

谁能告诉我正确的语法？

谢谢

Answer 1

如您在示例中所见，我打印了 2 个控制台，一个用于您的输入，一个用于您的i

所以你的问题是:

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.

工作示例: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);
      });

 }

调试错误示例:http://jsfiddle.net/kevalbhatt18/gqce9htx/2/