addEventListener与输入数组

addEventListener with an array of input

本文关键字：数组 输入 addEventListener      更新时间：2023-09-26

我需要使用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',

我想为每个input tag添加一个eventlistener。

谁能告诉我正确的语法?

谢谢

在示例中可以看到，我打印了2个控制台，一个用于输入，另一个用于i

所以你的问题是:

，当在侦听器函数中，您试图访问console.log(inputList[i].value);所以在那个时候你的i是4并且你的输入数组长度是0-3并且因为for循环我将因为inputList[4]是，所以你得到undefined数组中不存在

工作示例: 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/

事件处理程序的上下文是触发事件的输入元素。将inputList[i]替换为this:

console.log(this.value);

稍微修改一下使用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);
        });
    }
}

演示:http://jsfiddle.net/jfriend00/9ny3wcxu/

你不能在事件处理程序中引用inputList[i]，因为当事件处理程序被调用时(稍后)for循环已经完成运行，所以i点超过了inputList HTMLCollection对象的末尾。

您可以通过使用this作为指向引起事件的对象的指针来解决这个问题，因此this.value是刚刚修改的input字段的值。

事件触发时，

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

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

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

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

您可以使用闭包(如果不熟悉，请搜索并阅读一点)。代码如下:

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

基本上i的值在函数中保持不变。每当您在异步循环中执行某些操作时，都需要这样做。
这样做的好处是不需要改变访问值的方式，只是需要将它们封装在闭包函数中。
希望这能解决你的问题，而不需要改变访问数组的方式

var inputElem = document.getElementsByTagName('input');
for(var i = 0; i < inputElem.length; i++) {
inputElem[i].addEventListener('click', function(){
    alert(this.value);
}, false);
}
相关文章：