Comment obtenir un texte à l'intérieur d'une plage avec une classe. (à l'intérieur de pour la boucle)

Question

Je voudrais obtenir un texte à l'intérieur d'une envergure qui a une classe move. Donc, j'essaie de faire que lorsque vous cliquez sur le bouton, son texte à l'intérieur d'un mouvement de classe est passé à une fonction move comme l'un des arguments. p.s. le code HTML est donné, et je ne peux rien y changer. Y at-il quelque chose qui ne va pas dans mon code js? Le message d'erreur indique "Uncaught TypeError: Impossible de lire la propriété 'innerHTML' de undefined".

partie du code HTML;

<div id="my-card"> 


    <div class="card-container"> 
     <div class="card"> 
     <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> 
     <img src="icons/fighting.jpg" alt="weakness" class="weakness" /> 
     </div> 
    </div> 
    </div> 

Javascript:

for(var i=0; i<4; i++){ 
       document.querySelectorAll("#my-card .moves button")[i].onclick = function(){ move(document.querySelectorAll("#my-card .moves .move")[i].innerHTML, gameID, playerID) }; 
    } 

Answer 1

Essayez cette

for(var i=0; i<4; i++){ 
    document.querySelectorAll("#my-card .moves button")[i].onclick = 
     function(){ move(this.querySelectorAll(".move")[0].innerHTML, gameID, playerID) }; 
} 

je suis passé votre document.querySelectorAll-this.querySelectorAll.

Ci-dessous un extrait montrant les résultats à la console.

for (var i = 0; i < 4; i++) { 
 
    document.querySelectorAll("#my-card .moves button")[i].onclick = function() { 
 

 
    console.log(this.querySelectorAll(".move")[0].innerHTML) 
 

 
    } 
 
}

<div id="my-card"> 
 

 

 
    <div class="card-container"> 
 
    <div class="card"> 
 
     <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> 
 
     <img src="icons/fighting.jpg" alt="weakness" class="weakness" /> 
 
    </div> 
 
    </div> 
 
</div>