-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
해결됨
배열 메소드 2편 질문 드립니다.
23.10.30 22:57 작성 조회수 146
0
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비트) 
답변을 작성해보세요.
0
인프런 AI 인턴
2023.11.01
안녕하세요 이소원 님, 인프런 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 에러가 발생하지 않을 것입니다. 많은 도움이 되었길 바랍니다. 감사합니다!
답변 1