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之外点击。

我尝试在addModifyEvent中使用以下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);  });
    }       
    }

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

我不知道我是否应该做得更好：

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

或关闭而不是

inputList[i].addEventListener('input',

我想为每个eventlistener添加input tag。

有人能告诉我正确的语法吗？

由于

Answer 1

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

console.log(this.value);

Answer 2

使用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字段的值。

Answer 3

事件发生时，

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

Answer 4

您可以使用闭包（如果不熟悉，请搜索并阅读一下）。代码如下：

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

基本上 i 的值在函数内保持不变。每当您在Async循环中执行某些操作时，都需要这样做。
您的好处是您不需要更改访问值的方式，除非您需要将它们包含在闭包函数中。
希望这能解决您的问题，而无需改变想要访问阵列的方式。

Answer 5

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

所以你的问题是：

在侦听器功能中，您正在尝试访问 console.log（inputList [i] .value）; 所以那时你的我 4 ，你的输入数组长度是 0-3 因为 for loop 我会增加到4，因此 undefined 因为 inputList [4] 是没有出现在你的阵列中。

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

Answer 6

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

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

javascript - 带有输入

6 个答案: