javascript-带有输入数组的addEventListener

我需要使用

addEventListener

自动更新键入不同

输入文本的值（实际上是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>

但它不起作用（我得到
TypeError:inputList[I]是未定义的
）

我不知道我是否应该做：

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

或者是关闭的东西而不是

inputList[i].addEventListener('input', 

我想为每个
输入标记添加一个
eventlistener

谁能告诉我正确的语法

谢谢
事件处理程序的上下文是触发事件的输入元素。将
输入列表[i]
替换为
此
：

console.log(this.value);

使用
此.value
稍微修改一下的代码版本就可以了：

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

函数addModifyEvent（）{
var inputList=document.querySelectorAll（'input.form control'）；
对于（变量i=0；i

演示：


您不能在事件处理程序中引用
inputList[i]
，因为在调用事件处理程序时（稍后的某个时间），for
循环已完成运行，因此
i
指向
inputList
HTMLCollection对象的末尾

您可以通过使用
this
作为指向导致事件的对象的指针来解决此问题，因此
this。value
是刚刚修改的
输入
字段的值。
在事件触发时

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

inputList[i]
将无效，因为它是用于绑定事件侦听器的
for
循环的一部分

使用
此
获取触发事件的当前元素

console.log(this.value);


完整代码

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

函数addModifyEvent（）{
var inputList=document.querySelectorAll（'input.form control'）；
对于（变量i=0；i
您可以使用闭包（如果不熟悉，请搜索并阅读）。代码如下：

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

for（var i=0；i如您在示例中所见，我打印了两个控制台，一个用于输入，一个用于i

所以您的问题是：

在侦听器函数中，您试图访问
console.log（inputList[i].value）；因此，此时您的i为4，您的输入数组长度为0-3，并且由于for循环我将
将值增加到4，这样您就得到了未定义的，因为输入列表[4]是
您的阵列中不存在

工作示例：


var input=document.querySelectorAll（'input'）；
console.log（输入）
对于（var i=0；i
var inputElem=document.getElementsByTagName（'input'）；
对于（变量i=0；i
如果您能更详细地解释代码的工作原理，并编辑答案的代码格式，那就更好了。
for (var i=0; i<inputList.length;i++)                                                   
{
     (function(i){
            inputList[i].addEventListener('input',function(){   
                  console.log(inputList[i].value);  });
         }
    })(i);
}  

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

 }

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

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