使用javascript創建按鈕和事件監聽器

Question

我正在嘗試創建一個函數，該函數將添加帶有相應事件監聽器的按鈕

var wordCount = 0;
function createButton(word, alert){
    document.querySelector('body').innerHTML += "<button id=\"word-" + wordCount + "\">" + word + "</button>";
    document.querySelector('#word-' + wordCount).addEventListener('click', function(){
        console.log(alert);
    })
    wordCount++;
}

createButton('a', 'A');
createButton('b', 'B');

僅最后一個按鈕（b）響應。 單擊按鈕（a）不輸出任何內容。 您將如何解決？ 有沒有更好的方法可以實施呢？

Answer 1

我經常面對這種情況，並且以一種簡單的方式進行處理。 看到了這一點（該方法的優點是，如果您使用單引號將變量全部加滿，則可以輕松地在其中添加任何常用的雙引號，並且不會出現任何轉義問題）。 這里不需要addEventListener業務。 :-)

 var full = ''; var wordCount = 0; function createButton(word, alert) { alert='\\'' + alert + '\\''; full = full + '<a href="javascript:void(0)" onclick="alert(' + alert + ');">' full = full + '<button id="word-' + wordCount + '" >' + word + '</button>'; full = full + '</a>'; document.querySelector('body').innerHTML += full; wordCount++; } function anyFunction(alert) { console.log(alert); } createButton('a', 'A'); createButton('b', 'B');