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以外的地方。

我試着用以下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）。

我不知道我是否768,16做的更好：

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

或關閉的東西，而不是

inputList[i].addEventListener('input', 

我想補充一個eventlistener每個input tag。

任何人都可以告訴我正確的語法？

謝謝

Answer 1

正如你可以例如在看到我打印的2臺適合您的輸入，一個用於我

所以你的問題是：

當監聽功能你試圖訪問 console.log（inputList [i] .value）;所以當時您我是和您的輸入數組長度是0-3和由於for循環我將 被遞增到4那麼你有未定義因爲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); 
     }); 

} 

debugg你的錯誤例子：http://jsfiddle.net/kevalbhatt18/gqce9htx/2/

Answer 2

事件處理程序的上下文是事件觸發的輸入元素。更換inputList[i]與this：

console.log(this.value); 

Answer 3

稍微修改代碼的版本使用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 4

當時，事件觸發，

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 5

您可以使用閉（如果不熟悉，請搜索它，讀一下）。的代碼變爲如下：

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

基本上的我值保持在函數內完好。無論何時在Async循環中執行某些操作，都需要這樣做。
好處是您不需要更改訪問值的方式，只需要將它們放在閉包函數中。
希望這可以解決您在想要訪問陣列的方式中沒有任何更改的問題。

Answer 6

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

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