[javascript] null의 ‘innerHTML’속성을 설정할 수 없습니다.

Program / 글쓴이

오류 또는 Uncaught TypeError : Cannot set property ‘innerHTML’of null이 발생하는 이유는 무엇입니까? innerHTML을 이해하고 이전에 작동했다고 생각했습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>

답변

hello스크립트가로드 될 때 존재하도록 스크립트 앞에 div 를 배치 해야합니다.

답변

먼저 그것이 왜 일어나고 있는지에 대한 근본 원인을 이해하려고 노력합시다.

오류 또는 Uncaught TypeError : Cannot set property ‘innerHTML’of null이 발생하는 이유는 무엇입니까?

브라우저는 항상 전체 HTML DOM을 위에서 아래로로드합니다. script태그 ( headHTML 파일의 섹션에 있음) 내에 작성된 모든 JavaScript 코드 는 전체 DOM (본문 태그 내에 존재하는 다양한 HTML 요소 태그)이로드되기 전에도 브라우저 렌더링 엔진에 의해 실행됩니다. head태그에 있는 스크립트 hello는 실제로 DOM에서 렌더링되기 전에 ID가있는 요소에 액세스하려고합니다 . 따라서 분명히 JavaScript는 요소를 보지 못 했으므로 결국 null 참조 오류가 표시됩니다.

이전처럼 어떻게 작동시킬 수 있습니까?

사용자가 페이지에 처음 방문하자마자 페이지에 “hi”메시지를 표시하려고합니다. 따라서 DOM이 완전히로드되고 helloid 요소가 액세스 / 사용 가능 하다는 사실을 완전히 확신 할 때 코드를 연결해야합니다 . 두 가지 방법으로 달성 할 수 있습니다.

  1. 스크립트 재정렬 : 이렇게하면 helloid 요소가 포함 된 DOM 이 이미로드 된 후에 만 스크립트가 실행됩니다 . 모든 DOM 요소 뒤 즉, body태그가 끝나는 맨 아래에서 스크립트 태그를 이동하면됩니다 . 렌더링이 위에서 아래로 이루어 지므로 스크립트가 결국 실행되고 오류가 발생하지 않습니다.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>

    <body>
    <div id="hello"></div>

    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>

스 니펫 확장
  1. 이벤트 후킹 사용 : 브라우저의 렌더링 엔진은 이벤트 기반의 후크를 통해 window.onload브라우저가 DOM로드를 완료했음을 알려줍니다. 따라서이 이벤트가 시작될 때까지 helloID가 이미 DOM에로드 된 요소와 그 이후에이 요소에 액세스하려는 모든 JavaScript가 실패하지 않을 것이라는 점을 안심할 수 있습니다 . 따라서 아래 코드 스 니펫과 같은 작업을 수행합니다. 이 경우 스크립트 는 head태그 내부의 HTML 문서 상단에 있더라도 작동합니다 .
<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>

        <body>
        <div id="hello"></div>
        </body>
        </html>

스 니펫 확장

답변

“onload”작업을 수행하도록 자바 스크립트에 지시 할 수 있습니다. 다음을 시도해보세요.

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>

답변

JS를 넣으십시오. window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }

답변

페이지가로드되면 JavaScript 부분을 실행해야하므로 본문 태그 끝에 JavaScript 스크립트를 배치하는 것이 좋습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>

스 니펫 확장

답변

Javascript가 좋아 보입니다. div가로드 된 후에 실행 해보십시오. 문서가 준비되었을 때만 실행하십시오. $(document).readyjquery에서.

답변

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>
</body>
</html>

스 니펫 확장