Wie zu beheben "Uncaught TypeError: Cannot call method 'appendChild' von null"

Ich bin versucht zu schnappen Sie text aus einem HTML-text-Bereich, und rufen Sie die create () - Methode auf, wenn ein "Senden" - Taste gedrückt wird. Die Methode ist zu versuchen, die Nachricht aus dem Textfeld, und buchen, die zu seinen eigenen p-tag mit der Klasse, und schreiben Sie einen Datum-Stempel in seiner eigenen p-tag, und seine eigene Klasse.

Diese werden sowohl in den div 'Kommentare'. Die Fehler, die ich erhalte (mit developer-tools im Chrome), ist

Uncaught TypeError: Cannot call method 'appendChild' null.

Dieser richtet sich an "cmt.appendChild(divTag);". Ich bin sehr neu in Javascript, und das ist einfach die Praxis für mich zur Steigerung meiner Fähigkeiten. Alle Hilfe wird sehr geschätzt!

var cmt = document.getElementById('comments');

function create() {

    var username = 'User',
        message = document.getElementById("textBox").value,
        divTag = document.createElement('div'),
        p1 = document.createElement('p'),
        p2 = document.createElement('p');

    divTag.className = 'comment';

    p1.className = 'date';
    p1.innerHTML = new Date();
    divTag.appendChild(p1);

    p2.className = 'message';
    p2.innerHTML = username + ': ' +message;
    divTag.appendChild(p2);

    cmt.appendChild(divTag);
}
Sind Sie sicher, dass var cmt = document.getElementById('comments'); wird aufgerufen, nachdem das element mit der ID "Kommentare" erstellt wird?
Ja, mein Javascript ist extern auf meine HTML-Seite.

InformationsquelleAutor Fizzix | 2013-02-18

  1. 6

    Den Fehler, Sie bekommen suggeriert, dass es kein element mit der ID "Kommentare" auf Ihrer Seite. Dokument.getElementById zurück null wenn kein element mit solch einer ID gefunden wird, und somit cmd.appendChild(divTag) wird ausgeführt, wie null.appendChild(divTag).

    Wenn Sie sicher sind, dass das element vorhanden ist, können Sie ausführen, JavaScript, weist die cmt variable vor, das element wird erstellt, indem der browser. Um das zu verhindern, gängige Praxis ist es, die <script> tag, das schließt deine externe JavaScript - kurz vor der Schließung </body> tag.

    Wenn Sie sich nicht bewegen Sie Ihre script-tag aus irgendeinem Grund, versuchen Sie, den code ausgeführt wird, weist die variable mit $(document).ready() (jQuery) oder gleichwertig.

    Dieses Javascript von externen auf meine HTML-Seite. Ich habe definitiv einen div in meinem HTML mit der ID 'Kommentare'. Obwohl, das div ist komplett leer und wartet für diesen text platziert werden.
    Danke Kumpel, Hinzugefügt, mein code NACH meinen div wurde erstellt und funktionierte perfekt. Danke an alle für Eure Hilfe, war eine große Hilfe für mich! 🙂
    +1, ich weiß jetzt, was sonst noch funktionieren könnte, wenn jQuery ist keine option. Schön.
    Platzieren Sie das Skript vor der </body> sollte gesehen werden als eine gängige Praxis, nicht die alternative.
    Sind Sie richtig. Es war sehr leider formuliert, da (aus irgendeinem Grund) ich hatte die </body> Idee gestern... 🙁 Geändert, obwohl 🙂

    InformationsquelleAutor fresskoma

  2. 1

    Dein code funktioniert, wenn die benötigten Elemente vorhanden sind. Wie Sie sehen können, in diese Geige.

    Funktioniert, wenn die HTML ähnlich ist:

    <div id="comments">
    <input id="textBox" type="textBox" value="Hello" />
</div>

    Meine Vermutung ist, dass der Identifier könnte falsch geschrieben sein oder das element, wie Sie erwarten, dass es nicht existiert.

    Jedoch, wenn Sie das Skript in eine externe Datei, die es versuchen könnten, Sie zu führen, bevor das Dokument vollständig geladen, damit dein Skript bezieht sich auf Elemente, die nicht noch bereit, in die DOM.

    In jQuery würden Sie wickeln $(document).ready(function(){//your code here..}) herum.

    Es gibt einige details, wie dies in JavaScript SO schreiben: Documen Bereit äquivalent ohne jQuery.

    Es ist so merkwürdig, da ich ebenfalls getestet, diese ist Fiddle und es funktionierte perfekt. Ich habe ein div mit der ID 'Bemerkungen' in meinem HTML-Dokument. Mein HTML-Dokument verknüpft ist meine Javascript-Dokument im Kopf (natürlich), und mein div mit der ID 'Kommentare' genannt wird, in der Nähe des Ende meines HTML-Dokuments. Würde das etwas damit zu tun?
    Ohne jQuery denke ich es wird schwieriger als Sie kann sehen auf dem verlinkten Beispiel. Haben Sie gehen an dem, was x3ro vorgeschlagen, in Bezug auf die <script> tag in der Nähe der </body> tag.
    Tun, auf jeden Fall haben, um zu versuchen, und starten Sie das hinzufügen einiger jQuery in mich zu retten eine Menge Herumspielen. Danke!

    InformationsquelleAutor Nope

  3. 1

    Tatsächlich, seinen code in Ordnung ist. Seine nur, dass JavaScript ausgeführt wird, BEVOR HTML. Eine einfache Lösung ist, nisten Sie alle Ihre code innerhalb einer Funktion mit beliebigen Namen. Verwenden Sie dann Fenster.onload, um die Funktion auszuführen, nachdem das HTML geladen wird. also im Grunde:

    window.onload = function any_name()
{
//code to be executed
}

    Dies ist nützlich, vor allem, wenn Sie nicht wollen, zu bewegen Sie Ihre script-tag. Ich in der Regel wie zu verlassen, das tag, wo es ist.

    InformationsquelleAutor Brendan

Schreibe einen Kommentar