[英]javascript - addEventListener with an array of input
I need to use addEventListener
for automatically updating the values typed into different input text
(actually 4 input
tags) 我需要使用
addEventListener
来自动更新键入到不同input text
(实际上是4个input
标签)中的值
Here's the HTML code : 这是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>
I would like to update values when they are modified, without having to click outside the input
. 我想在修改值时更新它们,而不必在
input
外部单击。
I tried to use the following addModifyEvent
function in main
: 我试图在
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); });
}
}
but it doesn't work ( I get TypeError: inputList[i] is undefined
). 但这不起作用(我收到
TypeError: inputList[i] is undefined
)。
I don't know if I shoud better do : 我不知道我是否应该做得更好:
inputList[i].addEventListener('inputList['+i+']',
or something closed instead of 或封闭的东西
inputList[i].addEventListener('input',
I want to add an eventlistener
for each input tag
. 我想为每个
input tag
添加一个事件eventlistener
input tag
。
Anyone could tell me the right syntax ? 有人可以告诉我正确的语法吗?
Thanks 谢谢
The context of the event handler is the input element the event is fired on. 事件处理程序的上下文是触发事件的输入元素。 Replace the
inputList[i]
with this
: 更换
inputList[i]
与this
:
console.log(this.value);
A slightly modified version of your code that uses this.value
works just fine: 使用
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);
});
}
}
Demo: http://jsfiddle.net/jfriend00/9ny3wcxu/ 演示: http : //jsfiddle.net/jfriend00/9ny3wcxu/
You can't refer to inputList[i]
inside the event handler because by the time the event handler is called (sometime later) the for
loop has already finished running so i
points past the end of the inputList
HTMLCollection object. 您不能在事件处理程序中引用
inputList[i]
,因为在调用事件处理程序时(有时稍后), for
循环已经完成运行,因此i
指向了inputList
HTMLCollection对象的末尾。
You can solve the problem by just using this
as a pointer to the object that caused the event and thus this.value
is the value of the input
field that has just been modified. 您可以通过仅使用
this
作为导致事件的对象的指针来解决问题,因此this.value
是刚刚被修改的input
字段的值。
At the time the event fires, 事件触发时,
console.log(inputList[i].value);
inputList[i]
will not be valid as it was part of the for
loop used to bind event listeners. inputList[i]
无效,因为它是用于绑定事件侦听器的for
循环的一部分。
Use this
to get the current element on which the event was fired, 使用
this
来获取触发事件的当前元素,
console.log(this.value);
Full code 完整代码
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);
});
}
}
You can use closures (if not familiar, please search it and read a bit). 您可以使用闭包(如果不熟悉,请搜索并阅读一下)。 The code goes as below:
代码如下:
for (var i=0; i<inputList.length;i++)
{
(function(i){
inputList[i].addEventListener('input',function(){
console.log(inputList[i].value); });
}
})(i);
}
Basically the value of i remains intact within the function. 基本上, i的值在函数内保持不变。 This is required whenever you do something in a loop that is Async.
每当您在异步循环中执行某些操作时,这都是必需的。
The benefit being that you do not need to change the way you access values, except that you need to enclose them within a closure function. 好处是您不需要更改访问值的方式,只需要将它们包含在闭包函数中即可。
Hope this solves you issue without any changes in the way to want to access the array. 希望这可以解决您的问题,而无需更改访问数组的方式。
As you can see in example i printed 2 console one for your input and one for your i 如您在示例中看到的,我打印了2个控制台,一个用于您的输入 ,另一个用于您的i。
So your problem is: 所以你的问题是:
when in listener function you are trying to access console.log(inputList[i].value);
在侦听器函数中,当您尝试访问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.
因此,那时您的i为4,而您的输入数组长度为0-3 ,由于for循环,我将增加至4,因此您不确定,因为数组中不存在inputList [4] 。
Working example : http://jsfiddle.net/kevalbhatt18/gqce9htx/ 工作示例 : 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 your error example: http://jsfiddle.net/kevalbhatt18/gqce9htx/2/ 调试错误示例: http : //jsfiddle.net/kevalbhatt18/gqce9htx/2/
var inputElem = document.getElementsByTagName('input');
for(var i = 0; i < inputElem.length; i++) {
inputElem[i].addEventListener('click', function(){
alert(this.value);
}, false);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.