EventListener 질문입니다.
267
1 asked
버튼 클릭하면 콘솔 창에 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>
Answer 1
0
안녕하세요, 인프런 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이 출력될 거예요. 문제가 해결되었으면, 문의할 내용이 더 있으면 언제든지 물어보세요!
반복문 문제3 369게임
0
464
1
투두리스트 과제 힌트 좀 주세요 ㅠ
0
389
1
강의가 재생이 안됩니다.
0
417
2
강의 정리된 자료
0
410
1
타임즈뉴스 401에러
0
355
1
to do list
0
319
1
developer tool 아이콘 클릭했는데 콘솔창이 안떠요
0
255
1
git 허브나 netlify 용량
0
1251
1
깃허브 오류
0
366
1
Math 함수를 사용해봤는데. ... 은 무슨 의미일까요??
0
430
1
로컬스토리지 저장하는 방법 알려주세요 ㅠㅠ
0
862
1
타임즈 render 부분 질문
0
433
1
인프런 블로그 작성
1
489
1
전날엔 되던것이 담날엔 안되네요 ㅜㅜ
0
427
1
뉴욕타임즈 뉴스를 그려보자 reder편 질문
0
396
1
TO DO LIST
0
358
1
TO DO LIST
0
435
1
es6 7번 문제에 관하여 질문사항 있습니다.
0
326
1
node.js 로 웹서버 구축할때 힘들었는데 넷리파이로 이렇게 쉽게 웹서버가 만들어지다니.. 감동입니다. 항상 서버도 살아있고 깃헙이랑 동기화되는게 장점인것같아요
0
416
0
함수강의 연습문제 6번 질문사항
0
254
1
let gameOver = false;
0
252
1
api 호출 관련해서 Usage 가 50이라...
0
413
1
map이 안먹습니다.. ㅠㅠㅠ
0
366
2
"Postman" 앱이 더 이상 지원되지 않습니다.
0
810
1