Kan eigenschap ‘innerHTML’ van null niet instellen

Waarom krijg ik een foutmelding of Uncaught TypeError: Kan eigenschap ‘innerHTML’ van null niet instellen?
Ik dacht dat ik innerHTML begreep en dat het eerder werkte.

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

Antwoord 1, autoriteit 100%

Je moet de hellodiv voor het script plaatsen, zodat het bestaat wanneer het script wordt geladen.


Antwoord 2, autoriteit 26%

Laten we eerst proberen de hoofdoorzaak te begrijpen waarom het in de eerste plaats gebeurt.

Waarom krijg ik een foutmelding of Uncaught TypeError: Cannot set property
‘innerHTML’ van null?

De browser laadt altijd de volledige HTML DOM van boven naar beneden. Elke JavaScript-code die is geschreven in de script-tags (aanwezig in de sectie headvan uw HTML-bestand) wordt uitgevoerd door de browserweergave-engine zelfs vóór uw hele DOM (verschillende HTML-elementtags aanwezig binnen body-tag) is geladen. De scripts die aanwezig zijn in de head-tag proberen toegang te krijgen tot een element met id hellozelfs voordat het daadwerkelijk in de DOM is weergegeven. Het is dus duidelijk dat JavaScript het element niet zag en daarom krijg je uiteindelijk de nulreferentiefout te zien.

Hoe kunt u ervoor zorgen dat het weer werkt zoals voorheen?

U wilt het bericht “HI” op de pagina weergeven zodra de gebruiker voor de eerste keer op uw pagina landt. U moet dus uw code aansluiten op een punt wanneer u volledig zeker bent van het feit dat DOM volledig is geladen en de helloID-element toegankelijk / beschikbaar is. Het is op twee manieren haalbaar:

  1. Herstel uw scripts : Op deze manier worden uw scripts alleen afgevuurd nadat de DOM met uw helloID-element al is geladen. U kunt het bereiken door eenvoudigweg het script-tag te verplaatsen na alle DOM-elementen d.w.z. onderaan waar bodytag eindigt. Aangezien rendering van boven naar beneden gebeurt, zodat uw scripts op het einde worden uitgevoerd en u zonder fout wordt geconfronteerd.
   <!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>

3, Autoriteit 20%

U kunt JavaScript vertellen om de actie “Onload” uit te voeren … Probeer hiermee:

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

4, Autoriteit 6%

Plaats gewoon je JS in window.onload

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

Antwoord 5, autoriteit 4%

Het JavaScript-gedeelte moet worden uitgevoerd zodra de pagina is geladen, daarom is het raadzaam JavaScript-script aan het einde van de body-tag te plaatsen.

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

Antwoord 6, autoriteit 3%

Javascript ziet er goed uit. Probeer het uit te voeren nadat de div is geladen. Probeer alleen uit te voeren wanneer het document gereed is. $(document).readyin jQuery.


Antwoord 7, autoriteit 2%

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

Antwoord 8

Hier is mijn fragment, probeer het. Ik hoop dat het nuttig voor u zal zijn.

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

Antwoord 9

Je zou kunnen proberen de setTimeout-methode te gebruiken om ervoor te zorgen dat je html eerst wordt geladen.


Antwoord 10

De hoofdoorzaak is: HTML op een pagina moet worden geladen vóór javascript-code.
Op 2 manieren oplossen:

1) Laat HTML laden vóór de js-code.

<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) Verplaats js-code onder HTML-code

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

Antwoord 11

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

12

Ik heb hetzelfde probleem gehad en het blijkt dat de nul-fout was omdat ik de HTML waarmee werkte niet had opgeslagen.

Als het onderhavige element niet is opgeslagen zodra de pagina is geladen, is ‘null’, omdat het document het niet op het moment van belasting bevat. Het gebruik van venster.Olload helpt ook debuggen.

Ik hoop dat dit nuttig voor u was.


13

Deze fout kan lijken, zelfs als u uw script laadt nadat de HTML-render is voltooid. In dit gegeven voorbeeld uw code

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

heeft geen waarde in de div. Dus de fout is verhoogd, omdat er geen waarde is om naar binnen te veranderen. Het had

moeten zijn

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

dan.


Antwoord 14

Je moet divveranderen in p. Technisch gezien betekent innerHTML dat het binnen de <??? id=""></???>deel.

Wijzigen:

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

in

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

Doen:

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

wordt

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

wat eigenlijk nergens op slaat.

Je kunt ook proberen het volgende te veranderen:

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

in deze

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

om het te laten werken.


Antwoord 15

De fout is duidelijk dat het de HTML-tag niet krijgt waarin u de gegevens wilt instellen. Dus maak de tag beschikbaar voor JS, alleen dan kunt u daar gegevens op instellen.


Antwoord 16

Ongetwijfeld zijn de meeste antwoorden hier correct, maar u kunt ook dit doen:

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

Antwoord 17

Er zijn verschillende mogelijke oorzaken, zoals besproken, ik zou dit graag willen toevoegen voor iemand die hetzelfde probleem heeft als het mijne.

In mijn geval had ik een ontbrekende close div zoals hieronder weergegeven

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

Het missen van een close div kan resulteren in een desorganisatie van de transversal van kind naar ouder of ouder naar kind, wat resulteert in een fout wanneer u probeert toegang te krijgen tot een element in de DOM


Antwoord 18

Laat de DOM-belasting. Om iets in de DOM te doen, moet je het eerst laden. In uw geval moet u eerst de <div>TAG laden. Dan heb je iets te wijzigen. Als u de JS eerst laadt, is die functie op zoek naar uw HTMLom te doen wat u heeft gevraagd om te doen, maar wanneer die tijd uw HTMLwordt geladen en uw functie het HTML. Dus u kunt het script onderaan de pagina plaatsen. Binnen <body>TAG Dan kan de functie toegang krijgen tot de <div>omdat DOM al is geladen, de tijd die u op het script hebt geladen.


19

Ik heb mijn & lt; script & GT verplaatst; Tag onder het & lt; lichaam & gt; label. Laten we

proberen

<body>
    <p>The time is <span id="time"></span>.</p>
</body>
<script>
// Allways keep script at end for date and time object //
    var d = new Date();
    document.getElementById("time").innerHTML = d;
</script>

Other episodes