クラスを含むスパンの内部のテキストを取得する方法。 （forループの内側）

Question

クラスmoveを持つスパンの内部にテキストを入れたいと思います。だから、ボタンをクリックすると、クラス移動の内部のテキストが引数の1つとして関数moveに渡されます。 p.s. HTMLコードが与えられていて、何も変更できません。私のjsコードに何か問題がありますか？エラーメッセージ "Uncaught TypeError：未定義のプロパティ 'innerHTML'を読み取れません。

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

この

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

を試してみてください私はthis.querySelectorAllにごdocument.querySelectorAllを切り替えます。

以下は、結果をコンソールに示すスニペットです。

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>