it-swarm.com.de

Die Eigenschaft 'innerHTML' kann nicht auf null gesetzt werden

Warum erhalte ich einen Fehler oder einen nicht erfassten TypeError: Kann die Eigenschaft 'innerHTML' nicht auf null setzen?.

<!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>
52
Joshua W

Sie müssen das Hallo div vor das Skript setzen, damit es beim Laden des Skripts vorhanden ist. 

94
Erik Godard

Sie müssen Javascript anweisen, um die Aktion "onload" auszuführen ... Versuchen Sie Folgendes:

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

Ich sehe, dass alle Technikfreaks die Lösung dafür gefunden haben, wie man das Problem lösen kann, aber niemand hat sich mit dem Grund oder der Ursache befasst, warum es an erster Stelle passiert.

Warum erhalte ich einen Fehler oder ein nicht abgerufener TypeError: Die Eigenschaft .__ kann nicht festgelegt werden. 'innerHTML' von null?

Jeder Javascript-Code, der in den script-Tags (in head Ihrer HTML-Datei vorhanden) geschrieben wird, wird vom Browser-Rendering-Engine ausgeführt, noch bevor Ihr gesamtes DOM geladen wird. Der Browser lädt das gesamte HTML-DOM von oben nach unten. Die im head-Tag vorhandenen Skripts versuchen, auf ein Element mit der ID hello zuzugreifen, noch bevor es im DOM tatsächlich gerendert wurde. Es ist offensichtlich, dass JavaScript das Element nicht sehen konnte, sodass Sie den Nullreferenzfehler sehen.

Wie können Sie es so machen, dass es funktioniert?

Sie möchten die Nachricht "hi" auf der Seite anzeigen, sobald der Benutzer zum ersten Mal auf Ihrer Seite landet. Sie müssen also Ihren Code an einem Punkt anschließen, an dem Sie absolut sicher sind, dass DOM vollständig geladen ist und das Element hello id zugänglich ist. Es ist auf zwei Arten erreichbar:

  1. Ordne deine Skripte neu an : Auf diese Weise werden deine Skripte erst ausgelöst, nachdem das DOM mit dem Element hello id bereits geladen ist. Sie können dies erreichen, indem Sie das Script-Tag einfach nach allen DOM-Elementen verschieben, d. H. Am Ende, wo das Tag body endet. Da das Rendern von oben nach unten erfolgt, werden Ihre Skripts am Ende ausgeführt und es treten keine 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>

  1. Event-Hooking verwenden : Die Rendering-Engine des Browsers bietet ein Hook-Through-Ereignis window.onload, das Ihnen den Hinweis gibt, dass der Browser das DOM vollständig geladen hat. Wenn dieses Ereignis ausgelöst wird, können Sie also sicher sein, dass Ihr Element mit der hello-ID, die bereits in das DOM geladen ist, und alle danach ausgelösten Javascript, die versuchen, auf dieses Element zuzugreifen, nicht fehlschlagen. Sie machen also etwas wie das folgende Code-Snippet. Bitte beachten Sie, dass Ihr Skript in diesem Fall funktioniert, obwohl es oben im HTML-Dokument im Tag head 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>

14
RBT

Geben Sie einfach Ihre JS in window.onload ein.

window.onload = function() {

        what();

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

    }
5
RIYAJ KHAN

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

4
user6175882

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).ready in jquery.

3
JT Nolan

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

2
Eddy

Der JavaScript-Teil muss erst ausgeführt werden, wenn die Seite geladen ist. Es wird daher empfohlen, 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>

2
user5323957

Hier ist mein Ausschnitt probiert es aus. Ich hoffe es wird für Sie hilfreich sein.

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

Dieser Fehler kann auch auftreten, wenn Sie Ihr Skript laden, nachdem der HTML-Rendering abgeschlossen ist. In diesem Beispiel Ihren Code

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

hat keinen Wert im div. Der Fehler wird also ausgelöst, da darin kein Wert zu ändern ist. Es hätte sein sollen

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

dann.

0

Füge jquery zu < head> hinzu

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

Benutze $ document.ready () : Der Code kann in < head> oder in einer separaten Datei wie main.js sein.

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

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

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

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

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

0
abe312

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

0
user2114253

Sie müssen div in p ändern. Technisch bedeutet innerHTML, dass es im <??? id=""></???>-Teil liegt.

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>

was eigentlich keinen sinn macht.

Sie können auch versuchen zu ändern:

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

das sehr gut finden 

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

damit es funktioniert.

0
user6175882

Ich hatte das gleiche Problem und es stellte sich heraus, dass der Null-Fehler darauf zurückzuführen war, dass ich die HTML-Datei nicht gespeichert hatte, mit der ich arbeitete. 

Wenn das betreffende Element 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.

0

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>
0
Pines Tran