IT/JavaScript
DOM, 자바스크립트 - 버튼 클릭시 alert 생성 + for문 적용하여 alert 복수 적용
김숭늉이
2023. 8. 29. 09:02
728x90

안녕하세요 김숭늉 입니다 :)
그럼 바로 알아보겠습니다!
먼저 첫번째로는 dom을 사용하여 button 요소중 [0]번째를 가지고온후 이벤트 리스너를 추가해줍니다.
이벤트 리스너는 click시 alert가 노출되는 function을 추가하였습니다 :)
document.getElementsByTagName("button")[0].addEventListener("click", function(){ /// 0번째의 버튼에 적용
alert("클릭하셨네요? You got clicked!");
})
위 코드를 실행하면 아래와 같이 button의 0번째의 버튼을 클릭하면 아래와 같은 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!");
})
}

감사합니다
728x90
반응형