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');

使用javascript创建按钮和事件监听器

1 个答案: