Setproperty Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

Mit der innerHTML-Eigenschaft können Sie den Inhalt eines Elements mithilfe von JavaScript definieren.

Wenn Sie einen ungültigen Elementwert angeben mit dem Sie die innerHTML-Methode verwenden oder wenn Sie das Skript platzieren, bevor das Element auf der Seite angezeigt wird, wird der Fehler „Uncaught TypeError: Unable to set the „innerHTML“ null „property“ angezeigt. error

In diesem Leitfaden besprechen wir, was dieser Fehler bedeutet und warum er auftreten kann. Wir sehen uns ein Beispiel für diesen Fehler an, damit Sie erfahren, wie Sie ihn in Ihrem JavaScript beheben können

Uncaught TypeError:. Eigenschaft "innerHTML" kann nicht auf null gesetzt werden

Die Eigenschaft InnerHTML ist mit jedem Webelement verknüpft, das Sie mit JavaScript bearbeiten. Sie haben ein Webelement von der Seite mit einem "Getter" ausgewählt, z. B. getElementById () , oder Sie haben ein Element in JavaScript erstellt, das Sie ändern möchten.

Der Fehler „Eigenschaft ‚innerHTML‘ kann nicht auf null gesetzt werden“ ist ein Typfehler. Das bedeutet, dass wir versuchen, eine Eigenschaft oder Funktion auf einen Wert anzuwenden, der keine Eigenschaft oder Funktion unterstützt.

In diesem Fall versuchen wir, den Wert von innerHTML auf ein gleiches Element zu setzen . NULL. NULL-Werte ‚Äã‚Äãsind keine innereHTML-Eigenschaft

Es gibt zwei häufige Ursachen für diesen Fehler.

  • Einfügen eines Skripts, bevor ein Element auf der Webseite erscheint
  • Beziehen Sie sich auf die falsche Artikel-ID.

Wir werden die Grundursache analysieren, was wahrscheinlich der häufigste Fehler ist, der von Neulingen begangen wird.

ein Beispielszenario

Wir werden eine einfache Seite schreiben, die die Uhrzeit anzeigt. Definieren Sie zunächst eine einfache HTML-Seite . Diese HTML-Seite wird die Leinwand sein, auf der wir das Wetter anzeigen:

Diese HTML-Seite enthält einen und einen . Das Tag enthält einen

</pre></code>, der den Titel der Webseite definiert. Der <code><body></code> enthält einen Absatz</p> </a> </div> <p>im Absatz haben wir eine <a href="/html-span/"> <span> </a>. Wir werden den Inhalt dieses Tags durch die aktuelle Zeit in unserem JavaScript-Code ersetzen</p><p>Dann schreiben Sie ein Skript, um die Zeit abzurufen, wir fügt diesen JS-Code in <code><head> </code> hinzu: ..</p> <p>Unser Dokument enthält jetzt HTML und JavaScript. <code>getElementById ()</ Code> bekommt unser Spa n Tag <code>SHOW_TIME</code>. Dann rufen wir das aktuelle Datum mit dem Tag <ah ref = "/ JavaScrip t-Date/">JavaScript-Moduldatum </a> ab.</p><p>In der folgenden Codezeile erstellen wir eine Zeichenfolge, die angezeigt wird die aktuelle Stunde des Tages und Minuten der Stunde. Dieser String hat folgende Struktur:</p><p><code>HH: MM</code></p><p>Es gibt zwei Punkte, die die Werte ‚Äã‚Äãfür Stunden und Minuten trennen. Wir erstellen diesen String mit einer Technik namens <a href="/javascript-string-interpolation/"> JavaScript-String-Interpolation </a> . Dadurch können wir mehrere Werte in dieselbe Kette integrieren. Schließlich verwenden wir die innerHTML-Methode, um diese Zeit auf unserer Webseite anzuzeigen</p><p>die Seite unseres Webs im Webbrowser öffnen lassen.</p><figure class = `wp- the picture block-" > <img src = "https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw "alt =" AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"> </ figure> <p> unsere Webseite kann die Zeit nicht angezeigt werden. Wenn wir die JavaScript-Konsole aussehen, wir sehen einen Fehler:</p> <p> Dies ist eine weitere Darstellung der „Eigenschaft „innerHTML“ kann nicht auf null gesetzt werden.“ Sie sagt uns, dass das Element, auf das wir versuchen, den Wert von innerHTML zu setzen, null ist.</p><h2>Die Lösung</h2><p>Da der Wert von <code>SHOW_TIME</code> Null ist, können wir ableiten, dass JavaSc ript konnte das Element mit der ID <code>SHOW_TIME</code> nicht korrekt abrufen.</p><p>In diesem Fall liegt die Ursache darin, dass wir unseren <code><; script></code> zu früh in unserem Zeitplan . Unser <code> ... </pre> </div> <p>Wir haben unser <code> </div> <h2>Fazit</h2><p>Der Fehler "Uncaught TypeError: Unable to set property `innerHTML` null" Der Fehler wird verursacht, wenn versucht wird, einen innerHTML-Wert für ein Element zu setzen, dessen Wert gleich Null ist.</p><p>Um diesen Fehler zu beheben, vergewissern Sie sich, dass Ihr <code><script></code> nach dem Element steht, das Sie in Ihrem Skript auswählen möchten. Wenn das Problem dadurch nicht behoben wird, Stellen Sie sicher, dass Sie ein gültiges Element in Ihrem Programm auswählen.</p>