개요
특정 클래스(class)를 가진 버튼을 클릭했을 때 경고창(alert)을 띄우려면 document.getElementsByClassName() 메서드를 사용하면 됩니다. 이 메서드는 지정한 클래스 이름을 가진 모든 요소를 HTMLCollection 형태로 반환하기 때문에, 반복문을 통해 각 요소에 이벤트 리스너를 등록하는 방식으로 처리합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button class="clickTheButton">Click The Button to get an
alert</button>
<script>
for (var clickButton of
document.getElementsByClassName("clickTheButton"))
clickButton.addEventListener("click", alertMeessage);
function alertMeessage() {
alert("You have clicked the button");
}
</script>
</body>
</html>코드 설명
getElementsByClassName("clickTheButton"): 클래스 이름이clickTheButton인 모든 요소를 가져옵니다.for...of반복문: 반환된 컬렉션의 각 버튼 요소를 하나씩 순회합니다.addEventListener("click", alertMeessage): 각 버튼에 클릭 이벤트 리스너를 등록하여, 클릭 시alertMeessage함수가 실행되도록 합니다.alert("You have clicked the button"): 버튼이 클릭되면 브라우저에 경고 메시지를 표시합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(예: index.html)로 저장한 뒤, 해당 파일에서 마우스 오른쪽 버튼을 클릭하세요. 그런 다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 다음과 같은 화면이 출력됩니다.
여기서 버튼을 클릭하면 아래와 같은 경고창(alert) 메시지가 화면에 나타납니다.
