Obtenez la valeur du bouton correspondant dans une boucle

Question

querySelectorAll ne semble pas obtenir la liste des boutons une fois que j'ajoute un ensemble dynamique de boutons du tableau. Voici mon code : Où me suis-je trompé ?

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

Votre problème peut venir de : <button class="allbuttons" value=${textBtn[i]}>${textBtn[i]}</button>

Votre valeur n'est pas entre guillemets <button class="allbuttons" value="${textBtn[i]}">${textBtn[i]}</button>

Answer 2

Est-ce utile ? Est-ce ce dont vous avez besoin?

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