Rufen Sie den entsprechenden Schaltflächenwert in einer Schleife ab

Question

querySelectorAll scheint die Liste der Schaltflächen nicht abzurufen, sobald ich einen dynamischen Satz Schaltflächen aus dem Array hinzufüge. Hier ist mein Code: Wo habe ich einen Fehler gemacht?

const btns = document.getElementById("container");
const textBtn = ["btn 1", "btn 2", "btn 3", "btn 4", "btn 5", "btn 6"]
for (i = 0; i < textBtn.length; i++) {
  btns.insertAdjacentHTML('beforeend', `<button  class="allbuttons" value=${textBtn[i]}>${textBtn[i]}</button>`);
}

const btn = document.querySelectorAll(".allbuttons")
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function(event) {
    //console.log( btn[i]);
    console.log(event.target.value);
    alert(event.target.value)
  });
}

<div id="container"></div>

Answer 1

您的问题可能来自于： <button class="allbuttons" value=${textBtn[i]}>${textBtn[i]}</button>

您的值不在引号之间 <button class="allbuttons" value="${textBtn[i]}">${textBtn[i]}</button>

Answer 2

有帮助吗？这是你需要的吗？

const btns = document.getElementById("container");
const textBtn = ["btn 1", "btn 2", "btn 3", "btn 4", "btn 5", "btn 6"]
for (i = 0; i < textBtn.length; i++) {
  btns.insertAdjacentHTML('beforeend', ``);
}

const btn = document.querySelectorAll(".allbuttons")
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function(event) {
    console.log(event.target.value);
    alert(event.target.value)
  });
}