Question

function eventAdded(i) {
  console.log(inputs[i]);
}
var inputs = document.querySelectorAll('.js-capture__input input');
for (i = 0; i <= inputs.length; i++) {
  console.log(inputs[i]);
  inputs[i].addEventListener('change', eventAdded);
}

我正在设法将每个inputs[i]登录到控制台。 inputs[i]存在。但是我越来越未捕获的TypeError：无法读取未定义的属性'addEventListener'

如果我可以将每个人都登录到控制台，这没有定义吗？有人可以解释一下我5岁吗？

Answer 1

就像@CertainPerformance一样，您的错误是使用i <= inputs.length而不是i < inputs.length。

区别在于，在第一种情况下，您将超出数组的边界。

例如，如果您有一个由5个元素组成的数组（记住数组是从0开始的）：

当您使用i <= inputs.length进行检查时，情况就是这样：

0 <= 5: true
1 <= 5: true
2 <= 5: true
3 <= 5: true
4 <= 5: true
5 <= 5: true
6 <= 5: false

因此，您没有重复5次，而是重复了6次。最后一个（i=5）不在数组边界内（其上限为4）。

function eventAdded(i) {
  console.log(inputs[i]);
}
var inputs = document.querySelectorAll('.js-capture__input input');
for (var i = 0; i < inputs.length; i++) {
  console.log(inputs[i]);
  inputs[i].addEventListener('change', eventAdded);
}

如何将事件监听器添加到html集合中的每个元素？

1 个答案: