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 控制台上，我在以下行中得到 "Cannot read property 'style' of undefined"：inputs[i].style.width = "500px"; 当我单击输入时。

我的问题

如何修复我的代码？

Answer 1

"Cannot read property 'style' of undefined"

您看到此错误的原因是 for 循环已经结束并且 i 在 inputs NodeList 的边界之外 click 事件被触发。换句话说，由于数组中最后一个元素的索引比长度小 1，因此 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));
}

QuerySelectorAll 不适用于 onclick 事件

QuerySelectorAll not working with onclick event

javascript

selectors-api

场景

我的代码

什么不起作用

我的问题