针对在 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 事件，您可以调用函数 pass this 来获取您单击的 letter。

此外，您 querySelector 方法可以将所有字符附加到按钮支架。

演示：

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>

针对在 JavaScript 中创建的 HTML 个元素

Targeting HTML elements created in JavaScript

javascript

dom

dom-events