javascript - QuerySelectorAll 不适用于 onclick 事件

Question

场景

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

我的代码

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

<input type="text" id="sometext">

什么不起作用

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

我的问题

如何修复我的代码？

Answer 1

"Cannot read property 'style' of undefined"

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

要解决此问题，您可以将 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));
}