클래스 내부의 특정 버튼 태그를 선택하는 방법

Question

버튼을 클릭하면 코드가 클래스 이동의 이름을 알려야합니다. 하지만 내 코드가 제대로 작동하지 않으며 콘솔에 "정의되지 않은 getElementsByClassName 속성을 읽을 수 없습니다"라는 메시지가 표시됩니다. 내 자바 스크립트 코드에 문제가 있습니까? 감사.

내 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을 사용하면 맨 위부터 요소를 다시 선택하지 않아도 현재 범위에있는 곳으로 이동할 수 있습니다.