如何在一個班的範圍內獲得文本。 （在for循環中）

Question

我想要得到一個文本，其中有一個類move。所以我試圖做到這一點，當你點擊按鈕時，其類文本內部的文本將作爲參數之一傳遞給函數move。附： 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) }; 
} 

我換你document.querySelectorAll到this.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>