我有这样的代码例如：
<html>
<input class="basketQuantity" type=number>Basket item 1</input>
<input class="basketQuantity" type=number>Basket item 2</input>
</html>
<script>
quantityInputs = document.querySelectorAll(".basketQuantity");
for(var i in quantityInputs){
quantityInputs[i].addEventListener('change', function(){
console.log(quantityInputs[i]);
});
}
</script>
当我运行它时，我收到错误消息：
TypeError: quantityInputs[i].addEventListener is not a function谁能告诉我为什么会这样吗？
最佳答案
quantityInputs = document.querySelectorAll(".basketQuantity");
首先，
quantityInputs是NodeList object。所以for(var i in quantityInputs){
console.log(i);
}
将返回所有可枚举的属性-从
quantityInputs对象及其原型链返回，而不仅仅是它自己的（只是quantityInputs可枚举的属性）。 for .. in还将返回原型链中的length字段和item可枚举属性，并且该属性不是DOM节点，因此没有addEventListener方法。您必须使用
Object.keys：var nodeArray = [].slice.call(document.querySelectorAll(".basketQuantity"));
Object.keys(nodeArray).forEach(function (node) {
// node.addEventListener
});
要么
或
for .. in和hasOwnProperty检查：quantityInputs = document.querySelectorAll(".basketQuantity");
for(var i in quantityInputs){
if (quantityInputs.hasOwnProperty(i)) {
// quantityInputs[i].addEventListener
}
}
要么
在以后的版本（ES6）中，可以在这种情况下使用
for .. of循环：var quantityInputs = document.querySelectorAll("basketQuantity");
for (var node of quantityInputs) {
console.log(node.addEventListener);
}
注意（感谢@Teemu）：
另外，您的处理程序中的
i错误：quantityInputs[i].addEventListener('change', function(){
console.log(quantityInputs[i]);// return value of quantityInputs last i
});
因此最好将
this用于addEventListener目标：quantityInputs[i].addEventListener('change', function(){
console.log(this);
});