null의 'innerHTML'속성을 설정할 수 없습니다.

Question 1

오류 또는 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>

Question 2

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

Question 3

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

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

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

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

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

스크립트 재정렬 : 이렇게하면 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>

스 니펫 확장

이벤트 후킹 사용 : 브라우저의 렌더링 엔진은 이벤트 기반의 후크를 통해 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>

스 니펫 확장

Question 4

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

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

Question 5

JS를 넣으십시오. window.onload

window.onload = function() {

        what();

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

    }

Question 6

페이지가로드되면 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>

스 니펫 확장

Question 7

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

Question 8

<!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>

스 니펫 확장

Question 9

여기 내 스 니펫이 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.

<!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>

스 니펫 확장

Question 10

setTimeout 메소드를 사용하여 html이 먼저로드되는지 확인할 수 있습니다.

Question 11

근본 원인은 페이지의 HTML이 자바 스크립트 코드보다 먼저로드되어야한다는 것 입니다. 두 가지 방법으로 해결 :

1) js 코드 전에 HTML로드를 허용합니다.

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

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2) HTML 코드 아래에서 js 코드 이동

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

Question 12

<!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>

스 니펫 확장

Question 13

나는 같은 문제가 있었고 null 오류는 내가 작업하고 있던 html을 저장하지 않았기 때문에 발생했습니다.

페이지가로드 된 후 참조 된 요소가 저장되지 않은 경우로드시 문서에 포함되지 않으므로 'null'입니다. window.onload를 사용하면 디버깅에도 도움이됩니다.

도움이 되었기를 바랍니다.

Question 14

이 오류는 html 렌더링이 완료된 후 스크립트를로드하는 경우에도 나타날 수 있습니다. 이 주어진 예제에서 코드

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

div 안에 값이 없습니다. 따라서 내부에서 변경할 값이 없기 때문에 오류가 발생합니다. 그랬어 야 했어

<div id="hello">Some random text to change</div>

그때.

Question 15

jquery 추가 < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

$ document.ready () 사용 : 코드는 < head>main.js와 같은 별도의 파일에 있을 수 있습니다.

1) 동일한 파일에서 js 사용 (에서 추가 < head>) :

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) main.js와 같은 다른 파일 사용 (에서 추가 < head>) :

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

main.js 파일에 코드를 추가합니다. :)

Question 16

당신은 변경할 필요 div로 p. 기술적으로 innerHTML은 <??? id=""></???>부품 내부에 있음을 의미합니다 .

변화:

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

으로

<p id="hello"></p>

하기:

document.getElementById('hello').innerHTML = 'hi';

돌아올거야

<div id="hello"></div> into this <div id="hello">hi</div>

실제로 말이되지 않습니다.

변경을 시도 할 수도 있습니다.

document.getElementById('hello').innerHTML = 'hi';

이것으로

document.getElementById('hello').innerHTML='<p> hi </p> ';

작동하도록합니다.

Question 17

이 오류는 데이터를 설정하려는 HTML 태그를 가져 오지 않는다는 자체 설명입니다. 따라서 JS에서 태그를 사용할 수있게 만든 다음 데이터를 설정할 수 있습니다.

Question 18

의심 할 여지없이 여기에있는 대부분의 답변은 정확하지만 다음과 같이 할 수도 있습니다.

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

Question 19

나와 같은 문제가있을 수있는 사람을 위해 이것을 추가하고자하는 것과 같이 다른 가능한 원인이 있습니다.

제 경우에는 아래와 같이 닫기 div가 누락되었습니다.

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

닫기 div가 누락되면 하위에서 상위로 또는 상위에서 하위로 횡단의 구성이 해제되어 DOM의 요소에 액세스하려고 할 때 오류가 발생할 수 있습니다.

Question 20

DOM이로드되도록합니다. DOM에서 작업을 수행하려면 먼저로드해야합니다. 귀하의 경우 <div>먼저 태그 를로드해야합니다 . 수정해야 할 것이 있습니다. js를 먼저로드하면 해당 함수는 HTML요청한 작업을 수행하도록 찾고 있지만 그 시간 HTML에로드되고 함수가 HTML. 따라서 페이지 하단에 스크립트를 넣을 수 있습니다. <body>태그 안에서 함수는 <div>DOM이 이미로드 되었기 때문에 스크립트에 접근 할 수 있습니다 .