ボタンがクリックされたときにクラス内のテキストを取得する方法

Question

ボタンをクリックしたときにクラス「移動」内のテキストを取得したいと思いますが、テキストをうまく取得できませんでした。私のコードに何か間違っていますか？テキストを関数 "move"に渡したいと思います。

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

HTMLの一部です。

<div id="my-card"> 
    <div class="hidden buffs"></div> 

    <div class="card-container"> 

     <div class="card"> 
     <img src="icons/normal.jpg" alt="type" class="type"/> 
     <span class="hp">60HP</span> 
     <h2 class="name">Pokemon Name</h2> 
     <div class="pokemon-pic"> 
      <img src="images/pokeball.png" alt="pokemon" class="pokepic" /> 
     </div> 
     <p class="info">Description here</p> 
     <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> 

Answer 1

ボタンにデータとして移動を保存し、クリックするとデータセットから移動を取得できます。

for (var i = 0; i < 4; i++) { 
 
    document.querySelectorAll("#my-card .moves button")[i].onclick = function(el) { 
 
    console.log(el.currentTarget.dataset.move); 
 
    } 
 
}

<div id="my-card"> 
 
    <div class="hidden buffs"></div> 
 

 
    <div class="card-container"> 
 

 
    <div class="card"> 
 
     <img src="icons/normal.jpg" alt="type" class="type" /> 
 
     <span class="hp">60HP</span> 
 
     <h2 class="name">Pokemon Name</h2> 
 
     <div class="pokemon-pic"> 
 
     <img src="images/pokeball.png" alt="pokemon" class="pokepic" /> 
 
     </div> 
 
     <p class="info">Description here</p> 
 
     <div class="moves"> 
 
     <button data-move="a"> 
 
      <span class="move">a</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
     <button data-move="b"> 
 
      <span class="move">b</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
     <button data-move="c"> 
 
      <span class="move">c</span> <span class="dp"></span> 
 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
 
      </button> 
 
     <button data-move="d"> 
 
      <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>