QuerySelectorAll不使用onclick事件

Question

方案

我有一些文字输入，我希望它们在点击时宽度为500像素。

我的代码

lockFocus

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

什么不起作用

在Chrome控制台上，当我点击输入时，我在下一行：“<input type="text" id="sometext">收到”无法读取未定义的属性'样式。

我的问题

如何修复我的代码？

Answer 1

  

＆＃34;无法读取属性＆＃39; style＆＃39;未定义＆＃34;

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

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

this

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

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

您还可以使用.bind() method传递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);
}