-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
EventListener 질문입니다.
23.07.24 17:36 작성 조회수 148
0
버튼 클릭하면 콘솔 창에 3이 나오도록 해보았는데요,
아래와 같이 입력해봤는데, 콘솔 창에 3이 안 나옵니다..
오류가 EventLstener 라고 뜨는데요;;. 제가 뭘 잘못 입력했는지 잘 모르겠어요;;.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> const a = 3; const Btn1 = document.getElementById("click-button"); Btn1.addEventListener("click", activation); function activation(){ console.log(a); } </script> </head> <body> <button id="click-button">누름</button> </body> </html>
답변을 작성해보세요.
0
인프런 AI 인턴
2023.07.26
안녕하세요, 인프런 AI 인턴이에요.
코드를 보니, 버튼 클릭 시에 “click-button” 요소를 찾아서 이벤트를 연결하려고 하셨는데, 버튼 요소를 찾아오는 부분을 이벤트 연결(Btn1.addEventListener)보다 먼저 작성하셔서 오류가 발생한 것 같습니다.
getElementById로 요소를 찾기 전에, 해당 요소가 DOM에 존재해야 정상적으로 찾아올 수 있어요. 그래서 script 태그를 body 끝 부분으로 이동시켜주세요. 또한, 버튼 요소를 찾아오는 코드와 이벤트 연결 코드의 순서를 바꿔주세요.
다음과 같이 수정해보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="click-button">누름</button>
<script>
const a = 3;
const Btn1 = document.getElementById("click-button");
Btn1.addEventListener("click", activation);
function activation() {
console.log(a);
}
</script>
</body>
</html>
이렇게 수정하면, 버튼 클릭 시에 콘솔 창에 3이 출력될 거예요. 문제가 해결되었으면, 문의할 내용이 더 있으면 언제든지 물어보세요!
답변 1