クラス内の特定のボタンタグを選択する方法

Question

ボタンをクリックすると、クラス内の名前が警告されるようにしたいと考えています。しかし、私のコードは正しく動作せず、コンソールは "未定義のプロパティ 'getElementsByClassName'を読み取ることができません。私のJavaScriptコードに何か間違っていますか？ありがとう。

私の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); 
} 

私の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

注意するカップルの事：

1 - あなたはクリックハンドラにalert()を渡したとき、それはすぐに呼ばれていました。それを関数でラップする必要があります。

2 - thisを使用すると、要素を一番上から再選択する必要はなく、現在スコープ内にいる場所から移動することができます。

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>