在 for 循环后向类添加事件监听器； 香草JS

Question

我正在尝试让事件侦听器为在循环内创建的类工作。 我无法让它工作，有什么建议吗？

window.onload = function(){
  var div = document.createElement('div'),
    container = document.getElementById('container'),
    classname = document.getElementsByClassName("hello");

  div.className = 'hello';

  var tasks = [
    'One',
    'Two',
    'Three',
    'Four'
  ];

  for (var i = 0; i < tasks.length; ++i) {
    container.innerHTML += '<div class="hello"><p>' + tasks[i] + '</p></div>';
  }

  classname.addEventListener('click', function(){
    this.className = 'done';
  });

  console.log(classname);
};

Answer 1

classname是一个NodeList ， addEventListener是单个节点的方法。 您需要遍历元素：

for (i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', function() {
        this.className = 'done';
    });
}

Answer 2

getElementsByClassName返回一个 NodeList，因此您不能在其上添加事件侦听器。 您一定想向此列表中的元素添加事件侦听器。

所以这给出了：

//NodeList has not forEach method, but we can take it from an array
[].forEach.call( classnameElements, function( classnameElement ){
  classnameElement.addEventListener('click', function(){
    this.className = 'done';
  });
}):