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

program tip

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

radiobox 2020. 11. 16. 08:04

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

오류 또는 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 를 배치 해야합니다.

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

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

나는 모든 기술자가 문제를 제거하는 방법에 대한 해결책을 제공했지만 아무도 문제가 처음 발생하는 이유에 대한 원인이나 근본 원인을 제공하지 않았습니다.

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

JS를 넣으십시오. window.onload

window.onload = function() {

        what();

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

    }

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>

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

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

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

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

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

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

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

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

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

그때.

근본 원인은 다음과 같습니다. 페이지의 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>

jquery 추가 < head>

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

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

1) using js in same file (add this in the < head>):

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

2) using some other file like main.js (add this in the < head>):

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

and add the code in main.js file :)

You need to change div into p. Technically innerHTML means it is inside the <??? id=""></???> part.

Change:

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

into

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

Doing:

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

will turn

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

which actually does not make sense.

You can also try to change:

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

into this

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

to make it work.

I have had the same problem and it turns out that the null error was because I had not saved the html I was working with.

If the element referred to has not been saved once the page is loaded is 'null', because the document does not contain it at the time of load. Using window.onload also helps debugging.

I hope this was useful to you.

참고URL : https://stackoverflow.com/questions/18239430/cannot-set-property-innerhtml-of-null

'program tip' 카테고리의 다른 글

자식은 Angular 2에서 부모 이벤트를 수신합니다. (0)	2020.11.16
Storyboard를 사용하여 UITabBarController 항목을 재정렬하려면 어떻게해야합니까? (0)	2020.11.16
.vsix Visual Studio Extensions를 제거하는 방법은 무엇입니까? (0)	2020.11.16
iOS 8-사용자 지정 프레젠테이션으로 뷰 컨트롤러를 닫은 후 화면이 비어 있음 (0)	2020.11.16
Subversion 저장소를 다른 서버로 이동 (0)	2020.11.15

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

radiobox

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

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

'program tip' 카테고리의 다른 글

'program tip'의 다른글

티스토리툴바

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

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

'program tip' 카테고리의 다른 글

'program tip'의 다른글

관련글

티스토리툴바