爲for循環中的每個項添加一個onclick處理函數

Question

我試圖爲我的程序中有一個子項的每個按鈕添加一個onclick事件。最初，當我使用getElementsByClassName時，我並不知道它返回一個數組（與事後明顯不同），不像getElementById，它只返回一個項目。所以我編輯我的代碼迭代對所有按鈕元素，但仍無濟於事：

window.addEventListener('DOMContentLoaded', run); 
function run(){ 
    allLIElements = document.getElementsByTagName("button") 
    for (i=0; i < allLIElements.length; i++){ 
    var li = allLIElements[i]; 
    if (li.firstElementChild != null){ 
     li.classList.add('myBtn'); 
     // tests whether or not the element has been given the proper class 
     document.getElementById('check').innerHTML = li.classList; 
    } 
    }; 

    } 

//**Returns an HTMLcollection not a nodeList** 

var btn = document.getElementsByClassName("myBtn"); 
var span = document.getElementsByClassName("close")[0]; 
var modal = document.getElementById('myModal'); 

for (i=0; i < btn.length; i++){ 
    btn[i].onclick = function() { 
    modal.style.display = "block"; 
}; 
} 
    // When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
window.onclick = function(event) { 
    if (event.target == modal) { 
    modal.style.display = "none"; 
    } 
} 

編輯

這裏有一個鏈接顯示發生了什麼，所以現在當我點擊「客戶6「，例如我想要一個模式出現：https://jsfiddle.net/0k617jsq/

基本上沒有什麼事情發生時，我點擊按鈕，模態不激活。

Answer 1

的docs狀態：

當初始HTML文檔已被完全加載和分析，而無需等待樣式表，圖片和子框架完成加載的DOMContentLoaded事件。

這意味着在執行run功能之前，JavaScript引擎嘗試執行這一行：

var btn = document.getElementsByClassName("myBtn"); 

而且因爲沒有按鈕可能有類myBtn在這一點上，沒有處理程序將分配給任何按鈕。一種解決方案（很多）是將var分配和for循環分配給run函數中的onclick事件。

Answer 2

你應該發佈一個顯示問題的工作示例，否則我們只能猜測丟失的部分。以下是可以從您的代碼中推演出來的內容。

它或多或少的作品，所以如果你要顯示的HTML，可能會有幫助的答案。您需要隱藏加載模式。

window.addEventListener('DOMContentLoaded', run); 
 
function run(){ 
 
    allLIElements = document.getElementsByTagName("button") 
 
    for (i=0; i < allLIElements.length; i++){ 
 
    var li = allLIElements[i]; 
 
    if (li.firstElementChild != null){ 
 
     li.classList.add('myBtn'); 
 
     // tests whether or not the element has been given the proper class 
 
     document.getElementById('check').innerHTML = li.classList; 
 
    } 
 
    }; 
 

 
    } 
 

 
//**Returns an HTMLcollection not a nodeList** 
 

 
var btn = document.getElementsByClassName("myBtn"); 
 
var span = document.getElementsByClassName("close")[0]; 
 
var modal = document.getElementById('myModal'); 
 

 
// hide modal initially 
 
modal.style.display = "none"; 
 

 
for (i=0; i < btn.length; i++){ 
 
    btn[i].onclick = function() { 
 
    modal.style.display = ""; // Use empty string, not 'block' 
 
}; 
 
} 
 
    // When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

#myModal { 
 
    border: 1px solid red; 
 
}

<button class="myBtn">A button <span>with an element child</span></button> 
 
<div>Check: <span id="check"></span></div> 
 
<div id="myModal">the modal<br> 
 
<span class="close">close</span></div>