Die Eigenschaft 'innerHTML' kann nicht auf null gesetzt werden

91

Warum erhalte ich einen Fehler oder einen nicht erfassten Typfehler: Die Eigenschaft 'innerHTML' kann nicht auf null gesetzt werden. Ich dachte, ich hätte innerHTML verstanden und es vorher funktionieren lassen.

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

javascript onload innerhtml Joshua W.
quelle

152

Sie müssen das hellodiv vor dem Skript platzieren, damit es beim Laden des Skripts vorhanden ist.

Erik Godard
quelle

15

Wenn Sie window.onload = Funktionsname () {} verwenden, spielt es keine Rolle, ob das div davor oder danach steht.

Colyn1337

1

Knusprige Lösung. Aber ich bekomme immer noch den Fehler. In Chrom / Fedora 25 / Apache

Sahu V Kumar

Ich habe dieses Problem, ich füge Code in useEffect hinzu, aber ich habe Fehler !! wie kann ich ? useLayoutEffect (() => {const elemNext = document.querySelector ("# infinite-carousel> button.InfiniteCarouselArrow.InfiniteCarouselArrowNext"); elemNext.innerHTML = "next"; × TypeError: Die Eigenschaft 'innerHTML' von null elemNext kann nicht festgelegt werden = "next";

Moshtaba Darzi

43

Versuchen wir zunächst, die Grundursache zu verstehen, warum dies überhaupt geschieht.

Warum erhalte ich einen Fehler oder einen nicht erfassten Typfehler: Die Eigenschaft 'innerHTML' kann nicht auf null gesetzt werden.

Der Browser lädt immer das gesamte HTML-DOM von oben nach unten. Jeder in die scriptTags geschriebene JavaScript-Code (im headAbschnitt Ihrer HTML-Datei vorhanden) wird von der Browser-Rendering-Engine ausgeführt, noch bevor Ihr gesamtes DOM (verschiedene im Body-Tag vorhandene HTML-Element-Tags) geladen wird. Die im headTag vorhandenen Skripte versuchen, auf ein Element mit der ID zuzugreifen, hellonoch bevor es tatsächlich im DOM gerendert wurde. Daher konnte JavaScript das Element offensichtlich nicht sehen, und daher wird am Ende der Nullreferenzfehler angezeigt.

Wie können Sie es wie bisher zum Laufen bringen?

Sie möchten die Meldung "Hallo" auf der Seite anzeigen, sobald der Benutzer zum ersten Mal auf Ihrer Seite landet. Sie müssen Ihren Code also an einem Punkt anschließen, an dem Sie sich völlig sicher sind, dass DOM vollständig geladen ist und auf das helloID-Element zugegriffen werden kann. Es ist auf zwei Arten erreichbar:

Neuordnung Ihrer Skripte : Auf diese Weise werden Ihre Skripte erst ausgelöst, nachdem das DOM mit Ihrem helloID-Element bereits geladen wurde. Sie können dies erreichen, indem Sie einfach das Skript-Tag nach allen DOM-Elementen verschieben, dh nach unten, wo das bodyTag endet. Da das Rendern von oben nach unten erfolgt, werden Ihre Skripte am Ende ausgeführt und es tritt kein Fehler auf.

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

Erweitern Sie das Snippet

Ereignis-Hooking verwenden : Die Rendering-Engine des Browsers bietet ein ereignisbasiertes Hook-Through- window.onloadEreignis, das Ihnen den Hinweis gibt, dass der Browser das DOM vollständig geladen hat. Wenn dieses Ereignis ausgelöst wird, können Sie sicher sein, dass Ihr Element mit der hellobereits im DOM geladenen ID und dem danach ausgelösten JavaScript, das versucht, auf dieses Element zuzugreifen, nicht fehlschlägt. Sie machen also so etwas wie das folgende Code-Snippet. Bitte beachten Sie, dass in diesem Fall Ihr Skript funktioniert, obwohl es oben in Ihrem HTML-Dokument im headTag vorhanden ist.

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

Erweitern Sie das Snippet

RBT
quelle

Gutes Zeug, aber ich würde hinzufügen, ich glaube nicht, dass die Funktion document.getElementById (..). InnerHTML. muss in die Onload gestellt werden. Da das geladen werden kann, bevor das DOM geladen wird und es keinen Fehler gibt. Nur sein Anruf muss sein. jsfiddle.net/fbz6wLpd/8

Barlop

40

Sie könnten Javascript anweisen, die Aktion "onload" auszuführen ... Versuchen Sie Folgendes:

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

Colyn1337
quelle

10

Setzen Sie einfach Ihre JS ein window.onload

window.onload = function() {

        what();

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

    }

RIYAJ KHAN
quelle

6

Javascript sieht gut aus. Versuchen Sie es auszuführen, nachdem das div geladen wurde. Versuchen Sie, nur auszuführen, wenn das Dokument fertig ist. $(document).readyin jquery.

JT Nolan
quelle

1

Auch Typattribute in Skript-Tags sind veraltet.

JT Nolan

2

und das Importieren von jquery, um dies zu lösen, ist übertrieben, es sei denn, Sie planen, es hier für dieses Projekt zu verwenden. window.onloadmag ausreichen, aber es sind auch andere Veranstaltungen verfügbar. window

Siehe

5

Der JavaScript-Teil muss ausgeführt werden, sobald die Seite geladen wurde. Es wird daher empfohlen, das JavaScript-Skript am Ende des Body-Tags zu platzieren

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

Erweitern Sie das Snippet

user5323957
quelle

1

Würden Sie bitte aufhören, jedes eingegebene Wort groß zu schreiben?

VortexYT

5

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

Erweitern Sie das Snippet

user6175882
quelle

Ihre Antwort ist korrekt, aber darf ich Sie bitten, einen Kontext um Ihren Quellcode hinzuzufügen. Nur-Code-Antworten sind schwer zu verstehen. Es wird sowohl dem Fragesteller als auch zukünftigen Lesern helfen, wenn Sie Ihrem Beitrag weitere Informationen hinzufügen können.

RBT

3

Hier ist mein Ausschnitt versuchen es. Ich hoffe es wird hilfreich für dich.

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

Erweitern Sie das Snippet

quelle

3

Sie können versuchen, die setTimeout-Methode zu verwenden, um sicherzustellen, dass Ihr HTML zuerst geladen wird.

Eddy
quelle

3

Die Hauptursache ist: HTML auf einer Seite muss vor Javascript-Code geladen werden . Auf zwei Arten lösen:

1) Erlaube das Laden von HTML vor dem 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) Verschieben Sie den js-Code unter den HTML-Code

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

Kiefern Tran
quelle

1

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

Erweitern Sie das Snippet

user2114253
quelle

Problem ist Faust HTML Div geladen .. als Java-Skript-Funktion, die jetzt aufruft, funktioniert es ...

user2114253

1

Ich hatte das gleiche Problem und es stellte sich heraus, dass der Nullfehler darin bestand, dass ich das HTML, mit dem ich arbeitete, nicht gespeichert hatte.

Wenn das Element, auf das verwiesen wird, nach dem Laden der Seite nicht gespeichert wurde, ist es 'null', da das Dokument es zum Zeitpunkt des Ladens nicht enthält. Die Verwendung von window.onload hilft auch beim Debuggen.

Ich hoffe das war nützlich für dich.

plagueanomicPlague
quelle

1

Dieser Fehler kann auch dann auftreten, wenn Sie Ihr Skript nach Abschluss des HTML-Renderings laden. In diesem Beispiel Ihren Code

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

hat keinen Wert innerhalb der div. Der Fehler wird also ausgelöst, da im Inneren kein Wert geändert werden kann. Es hätte sein sollen

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

dann.

Marko Slijepčević
quelle

0

Fügen Sie jquery hinzu < head>

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

Verwenden Sie $ document.ready () : Der Code kann sich in < head>oder in einer separaten Datei wie main.js befinden

1) Verwenden von js in derselben Datei (fügen Sie dies in das hinzu < head>):

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

2) Verwenden einer anderen Datei wie main.js (fügen Sie diese in die < head>):

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

und füge den Code in die Datei main.js ein :)

abe312
quelle

0

Sie müssen sich ändern divin p. Technisch bedeutet innerHTML, dass es sich innerhalb des <??? id=""></???>Teils befindet.

Veränderung:

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

in

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

Tun:

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

wird umkehren

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

das macht eigentlich keinen sinn.

Sie können auch versuchen, Folgendes zu ändern:

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

das mögen

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

damit es funktioniert.

user6175882
quelle

0

Der Fehler ist selbsterklärend. Es wird nicht das HTML-Tag abgerufen, in dem Sie die Daten festlegen möchten. Stellen Sie das Tag also nur JS zur Verfügung. Dann können Sie Daten darauf festlegen.

Shubham
quelle

0

Zweifellos sind die meisten Antworten hier richtig, aber Sie können dies auch tun:

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

Shrey Tripathi
quelle

0

Es gibt verschiedene mögliche Ursachen, wie besprochen. Ich möchte dies nur für jemanden hinzufügen, der möglicherweise das gleiche Problem wie ich hat.

In meinem Fall hatte ich einen fehlenden engen Div, wie unten gezeigt

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

Das Fehlen eines engen Divs kann zu einer Desorganisation der Übertragung von Kind zu Elternteil oder von Elternteil zu Kind führen, was zu einem Fehler führt, wenn Sie versuchen, auf ein Element im DOM zuzugreifen

Proxybee
quelle

Bitte antworten Sie gemäß OP-Beispiel.

Mishsx

@mishsx der Grund für meine Antwort: Ich hatte genau den gleichen Fehler und als ich suchte, sah ich alle Korrekturen, aber nicht die Korrektur in meinem eigenen Fall. Die gleiche Frage zu stellen, würde sich duplizieren. Ich hatte das Gefühl, dass jemand anderes genau in der Lage sein könnte Dieselbe Situation auch und ich habe beschlossen, meinen eigenen Fehler zu posten und als Antwort zu beheben ... wie Sie sehen können, ist dies in der Antwort klar angegeben, daher ist es für diejenigen hilfreich, die sich in genau der gleichen Situation befinden, und für andere klar, dass dies nicht der Fall ist Es ist nicht die Lösung für den Fehler in der Frage. Wenn dies nicht in Ordnung ist, geben Sie mir

bitte

0

Lassen Sie das DOM laden. Um etwas im DOM zu tun, müssen Sie es zuerst laden. In Ihrem Fall müssen Sie <div>zuerst das Tag laden . dann müssen Sie etwas ändern. Wenn Sie zuerst das js laden, versucht diese Funktion, das HTMLzu tun, worum Sie gebeten haben, aber wenn diese Zeit geladen HTMLwird, kann Ihre Funktion das nicht finden HTML. So können Sie das Skript am Ende der Seite platzieren. Innerhalb des <body>Tags kann die Funktion dann auf das <div>DOM zugreifen, da DOM bereits geladen ist, wenn Sie das Skript aufrufen.

HeshanHH
quelle

Die Eigenschaft 'innerHTML' kann nicht auf null gesetzt werden

Antworten: