DOM, 자바스크립트 - 버튼 클릭시 alert 생성 + for문 적용하여 alert 복수 적용

 

 

 

 

안녕하세요 김숭늉 입니다 :)

그럼 바로 알아보겠습니다!

 

 

 

먼저 첫번째로는 dom을 사용하여 button 요소중 [0]번째를 가지고온후 이벤트 리스너를 추가해줍니다.

이벤트 리스너는 click시 alert가 노출되는 function을 추가하였습니다 :)

document.getElementsByTagName("button")[0].addEventListener("click", function(){   /// 0번째의 버튼에 적용
    alert("클릭하셨네요? You got clicked!");
})

 

 

위 코드를 실행하면 아래와 같이 button의 0번째의 버튼을 클릭하면 아래와 같은 alert 창이 생성 됩니다.

버튼 클릭시 alert 창 생성

 

 

그다음은 방금 작성한 문장을 for 루프로 넣어서 버튼의 갯수만큼 루프가 돌아갈수 있도록 설정합니다! :)

var numberOfDrumButtons = document.querySelectorAll("button").length;
for (var i=0; i < numberOfDrumButtons; i++){ // button의 length만큼 for반복

    document.getElementsByTagName("button")[i].addEventListener("click", function(){   
        alert("클릭하셨네요? You got clicked!");
    })
    
}

 

결과

 

 

 

감사합니다