QuerySelectorAll 不适用于 onclick 事件

Posted 2023-05-09

【中文标题】QuerySelectorAll 不适用于 onclick 事件

【英文标题】：QuerySelectorAll not working with onclick event

【发布时间】：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";
	

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

什么不工作

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

我的问题

如何修复我的代码？

【问题讨论】：

查看链接的问题，了解如何处理这个经常遇到的问题。

那是因为当用户点击输入时，i var 没有被定义。

@Pointy：从技术上讲，它是重复的，但在这个问题上，实际上需要一个新的范围来解决它。这里不是这样。

@Stubborn：只需将这个：inputs[i].style.width = "500px"; 改成这个this.style.width = "500px";

@squint 谢谢，这行得通！

【参考方案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));