javascript - Kan inte sätta egenskapen 'innerHTML' på null

Varför får jag ett fel eller Uncaught TypeError: Cannot set property 'innerHTML' of null? Jag trodde att jag förstod innerHTML och hade det fungerande tidigare.

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

Svar #1

Du måste placera hello-diven före skriptet, så att den finns när skriptet laddas.

Svar #2

Låt oss först försöka förstå den grundläggande orsaken till varför det händer från första början.

Varför får jag ett fel eller Uncaught TypeError: Cannot set property 'innerHTML' of null?

Webbläsaren laddar alltid hela HTML DOM från topp till botten. All JavaScript-kod som skrivs inuti script-taggarna (som finns i head-sektionen av din HTML-fil) körs av webbläsarens renderingsmotor även innan hela din DOM (olika HTML-elementtaggar som finns inom body-taggen) är laddad. Skripten som finns i head-taggen försöker komma åt ett element med id hello även innan det faktiskt har renderats i DOM. Så uppenbarligen misslyckades JavaScript med att se elementet och därför slutar du med att se felet null reference.

Hur kan du få det att fungera som tidigare?

Du vill visa hi-meddelandet på sidan så snart användaren landar på din sida för första gången. Så du behöver koppla in din kod vid en punkt då du är helt säker på att DOM är helt laddad och hello-id-elementet är åtkomligt/tillgängligt. Det kan uppnås på två sätt:

  1. Ordna om dina skript: På detta sätt körs dina skript endast efter att DOM:en som innehåller ditt hello-id-element redan är laddad. Du kan uppnå detta genom att helt enkelt flytta skript-taggen efter alla DOM-element, dvs. längst ner där body-taggen slutar. Eftersom renderingen sker från topp till botten körs dina skript i slutet och du får inga fel.

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

  2. Använd event hooking: Webbläsarens renderingsmotor tillhandahåller en händelsebaserad hook genom window.onload-händelsen som ger dig en vink om att webbläsaren har slutfört laddningen av DOM. Så när denna händelse triggas kan du vara säker på att ditt element med id hello redan är laddat i DOM och alla efterföljande JavaScript som försöker komma åt detta element inte kommer att misslyckas. Så du gör något som nedanstående kodsnutt. Observera att i detta fall fungerar ditt skript även om det är placerat högst upp i ditt HTML-dokument inuti head-taggen.

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

Svar #3

Du kan få JavaScript att utföra åtgärden "onload"... Testa med detta:

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

Svar #4

Sätt bara in din JS i window.onload

window.onload = function() {

        what();

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

    }

Svar #5

JavaScript-delen behöver köras när sidan har laddats, därför rekommenderas det att placera JavaScript-skriptet i slutet av body-taggen.

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

Relaterade artiklar