-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
미해결
코드의 차이점
23.11.30 03:00 작성 조회수 203
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const $text = document.querySelector('#text');
const $textarea = document.querySelector('#textarea');
$textarea.addEventListener('keyup', () => {
$text.textContent = $textarea.value.length;
});
})
</script>
<body>
<h1 id='text'>글자수 : 0</h1>
<textarea id="textarea"></textarea>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
const $text = document.querySelector('#text');
const $textarea = document.querySelector('#textarea');
document.addEventListener('DOMContentLoaded', () => {
$textarea.addEventListener('keyup', () => {
$text.textContent = $textarea.value.length;
});
})
</script>
<body>
<h1 id='text'>글자수 : 0</h1>
<textarea id="textarea"></textarea>
</body>
</html>안녕하세요 선생님. 학습중에 궁금한 점이 생겨 질문 남깁니다
왜 위 코드는 실행이 되고 아래 코드는 실행이 안되는지 궁금합니다.
$textarea가 null이라고 나오는 것 같은데 스크립트 태그의 최상단에 $textarea를 dom객체로 지정해줬는데
혹시 addeventlistener가 비동기 방식으로 먼저 호출이 되기 때문인가요?
브라우저 동작 방식에 관련된 문제일까요?
답변을 작성해보세요.
0
조현영
지식공유자2023.11.30
html 코드는 위에서 아래로 실행됩니다. script 태그가 실행될 때 html body 태그들이 없어서 그렇습니다.
DOMcontentLoaded는 body가 다 로딩되길 기다립니다.
답변 1