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 hello
div 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 head
van 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 hello
zelfs 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 hello
ID-element toegankelijk / beschikbaar is. Het is op twee manieren haalbaar:
- Herstel uw scripts : Op deze manier worden uw scripts alleen afgevuurd nadat de DOM met uw
hello
ID-element al is geladen. U kunt het bereiken door eenvoudigweg het script-tag te verplaatsen na alle DOM-elementen d.w.z. onderaan waarbody
tag 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).ready
in 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 div
veranderen 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 HTML
om te doen wat u heeft gevraagd om te doen, maar wanneer die tijd uw HTML
wordt 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>