QuerySelectorAll 不适用于 onclick 事件答案

【问题标题】：QuerySelectorAll not working with onclick eventQuerySelectorAll 不适用于 onclick 事件
【发布时间】：2016-04-01 15:46:42
【问题描述】：

场景

我有一些文本输入，我希望它们在被点击时具有 500 像素的宽度。

我的代码

var inputs = document.querySelectorAll("input[type=text]")
for(i=0; i<inputs.length; i++){
	inputs[i].onclick = function(){
		inputs[i].style.width = "500px";
	}
}

&lt;input type="text" id="sometext"&gt;

什么不工作

在 chrome 控制台上，当我单击输入时，我在以下行中收到“无法读取未定义的属性‘样式’”：inputs[i].style.width = "500px";。

我的问题

如何修复我的代码？

【问题讨论】：

查看链接的问题，了解如何处理这个经常遇到的问题。
那是因为当用户点击输入时，i var 没有被定义。
@Pointy：从技术上讲，它是重复的，但在这个问题上，实际上需要一个新的范围来解决它。这里不是这样。
@Stubborn：只需将这个：inputs[i].style.width = "500px"; 改成这个this.style.width = "500px";
@squint 谢谢，这行得通！

标签： javascript selectors-api

【解决方案1】：

“无法读取未定义的属性‘样式’”

您看到此错误的原因是for 循环已经结束，并且i 在click 事件被触发时超出了inputs NodeList 的范围。换句话说，由于数组中最后一个元素的索引比长度小一，inputs[i] 是未定义的，因为当click 事件监听器被触发时，i 等于 NodeList 的长度。

要解决此问题，您可以将 inputs[i] 更改为 this 以访问单击的元素。这样做可以避免使用i（这是导致问题的原因）：

var inputs = document.querySelectorAll("input[type=text]")
for (i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function() {
    this.style.width = "500px";
  });
}

或者，您可以使用 IIFE 来在每次迭代中传递 i 的值：

var inputs = document.querySelectorAll("input[type=text]")
for (i = 0; i < inputs.length; i++) {
  (function(i) {
    inputs[i].addEventListener('click', function() {
      inputs[i].style.width = "500px";
    });
  })(i);
}

您也可以使用.bind() method 传递i 的值：

var inputs = document.querySelectorAll("input[type=text]")
for (i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function(i) {
    inputs[i].style.width = "500px";
  }.bind(this, i));
}

【讨论】：