針對在 JavaScript 中創建的 HTML 元素

Question

我自己的第一個項目，當我嘗試定位一組使用 JavaScript 創建的按鈕時遇到問題。 事件監聽器只會在我點擊創建的第一個按鈕時觸發。 它不會注冊任何其他按鈕點擊。 我在這里想念什么？ 任何幫助，將不勝感激。

JavaScript：

function creatButtons() {
    for ( var i = 65; i <= 90; i++ ) {
        let letter = String.fromCharCode( i );
        let button = document.createElement( "button" );
        button.id="buttons"
        button.innerHTML = letter;
        buttonHolder.appendChild(button)
    }
    
}
creatButtons()


// Event listeners
document.getElementById("buttons").addEventListener('click',function(){
     console.log("testing")
});

HTML：

<div id="button-holder"></div>
<script src="script.js"></script>

Answer 1

您沒有定義buttonHolder 。

function creatButtons() {
    var buttonHolder = document.getElementById('buttonHolder'); // add this line
    for ( var i = 65; i <= 90; i++ ) {
        let letter = String.fromCharCode( i );
        let button = document.createElement( "button" );
        button.id="buttons"
        button.innerHTML = letter;
        buttonHolder.appendChild(button)
    }
}

附加說明，建議使用forEach而不是for loop 。

Answer 2

您可以簡單地使用className而不是id屬性。 此外，對於您的onclick事件，您可以調用 function 傳遞this以獲取您單擊的letter 。

另外，你用querySelector方法來 append 你所有的字符到按鈕持有人。

演示：

 function creatButtons() { let buttonHolder = document.querySelector('#button-holder') for (var i = 65; i <= 90; i++) { let letter = String.fromCharCode(i); let button = document.createElement("button"); button.className = "buttons" button.innerHTML = letter; button.onclick = function() { getLetter(this) //get letter }; buttonHolder.appendChild(button) } } creatButtons() //Get letters function getLetter(e) { console.log(e.innerHTML) }

 <div id="button-holder"></div>