for循環後的addEventListener類;香草JS

Question

我想讓eventlistener爲循環內創建的類工作。我無法得到它的工作，有什麼建議嗎？

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 has not forEach method, but we can take it from an array 
[].forEach.call(classnameElements, function(classnameElement){ 
    classnameElement.addEventListener('click', function(){ 
    this.className = 'done'; 
    }); 
}):