QuerySelectorAll不适用于onclick事件

Stubborn 发表于 Dev

顽固

设想

我有一些文本输入，我希望它们在单击时具有500px的宽度。

我的密码

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'of undefined”：inputs[i].style.width = "500px";当我单击输入时。

我的问题

如何修复我的代码？

乔什·克罗齐耶（Josh Crozier）

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

您看到此错误的原因是，触发事件时，for循环已经结束并且i在inputsNodeList的边界之外click。换句话说，由于数组中最后一个元素的索引比长度小一个，inputs[i]因此未定义，因为i它等于click触发事件侦听器时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()方法来传递的值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));
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。