Comment sélectionner une étiquette de bouton spécifique dans une classe

Question

Je voudrais faire en sorte que lorsque vous cliquez sur le bouton, le code devrait alerter le nom à l'intérieur d'un mouvement de classe. Mais mon code ne fonctionne pas correctement, et la console dit "Impossible de lire la propriété 'getElementsByClassName' de undefined". Y at-il quelque chose qui ne va pas dans mon code javascript ?? Merci.

Fait partie de mon code javascript;

for(var i=0; i<4; i++){ 
       document.getElementsByClassName("moves")[0].getElementsByTagName("BUTTON")[i].onclick 
       = alert(document.getElementsByClassName("moves")[0].document.getElementsByClassName("move")[i].textContent); 
} 

Fait partie de mon code HTML;

<div class="moves"> 
      <button> 
      <span class="move">a</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">b</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">c</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">d</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
     </div> 

Answer 1

Un couple de choses à noter:

1 - Lorsque vous passez un alert() au gestionnaire de clic, il a été appelé immédiatement. Vous devez l'envelopper dans une fonction. 2 - En utilisant this, vous n'avez pas besoin de resélectionner l'élément du tout en haut, vous pouvez aller d'où vous êtes actuellement dans la portée.

for (var i = 0; i < 4; i++) { 
 

 
    document.getElementsByClassName("moves")[0].getElementsByTagName("BUTTON")[i].onclick = function() { 
 
    alert(this.textContent.trim()) 
 
    }; 
 
}

<div class="moves"> 
 
    <button> 
 
      <span class="move">a</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
    <button> 
 
      <span class="move">b</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
    <button> 
 
      <span class="move">c</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
    <button> 
 
      <span class="move">d</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
</div>