배열 메소드 2편 질문 드립니다.
const tw = ['나연','사나','지효','다현'];
tw.forEach(function( member, index ){
const p = document.createElement('p')
p.textContent = `${index+1} 번째 멤버는 ${member}`
document.body.appendChild(p);
})
위처럼 작성을 했는데요.
아래처럼 에러가 발생합니다. 제가 어디가 틀렸는지 감이 안 잡혀서요 ㅠ
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
// 크롬 버전 : 버전 118.0.5993.118(공식 빌드) (64비트) 답변 1
0
안녕하세요 이소원 님, 인프런 AI 인턴이에요.
해당 에러는 document.body가 null 값을 가지고 있어서 발생하는 문제입니다. 이 에러는 보통 자바스크립트 코드가 <script> 태그를 <body> 태그 위에 위치시켰을 때 발생할 수 있습니다.
해결 방법으로는 아래 두 가지 방법을 시도해 볼 수 있습니다:
1. <script> 태그 위치 변경: <script> 태그를 <body> 태그 바로 위에 위치시켜보세요.
2. DOMContentLoaded 이벤트 추가: 스크립트 코드를 <body> 태그 안으로 이동시키고, DOMContentLoaded 이벤트를 사용하여 스크립트가 실행되는 시점을 조정해보세요.
아래는 DOMContentLoaded 이벤트를 사용하여 코드를 수정한 예시입니다:
document.addEventListener('DOMContentLoaded', function() {
const tw = ['나연','사나','지효','다현'];
tw.forEach(function( member, index ){
const p = document.createElement('p')
p.textContent = `${index+1} 번째 멤버는 ${member}`
document.body.appendChild(p);
});
});
이렇게 수정하면 스크립트 코드가 문서 구조가 완전히 로드된 후에 실행되므로 document.body 에러가 발생하지 않을 것입니다. 많은 도움이 되었길 바랍니다. 감사합니다!
(ToDoList 실습) ! 연산자에 대해
0
103
1
사진이 나타나지 않아요
0
145
1
디지털 시계 만들기 질문 드립니다.
0
437
1
생성자 함수 관련 질문 드립니다
0
277
1
로또 번호 추첨기 과제 만들기 중
0
254
1
템플릿 리터럴 작동이 되지 않습니다.
0
229
1
고양이 api
0
505
1
노드와 메소드..
1
321
2
수료 후 수업계획 문의드립니다.
1
528
1
질문합니다!
1
375
1
고양이 api 안되서 알려주신 강아지 api 검색했는데요
1
601
1
미니 프로젝트 포토 앨범
0
339
1
삼항 연산에서 질문
0
299
1
함수 3편 강의 듣고 질문 드립니다!!
0
364
1
Date 강의 질문드립니다.
1
308
1
질문있습니다.
1
307
1
<input type="button"> 과 <button>차이
1
530
1
재질문)html작성할때
1
255
1
콘솔창에서 결과를 보고싶을때
1
234
1
html 작성할때
1
207
1
자바 스크립트 반복문
1
258
1
상수 선언이랑 prompt 질문이요
1
245
1
이미지 api
0
492
2
로또 번호 추첨하기 中
0
276
1