Comment réparer “Uncaught TypeError: Ne peut pas appeler une méthode appendChild', null”

Je tente de saisir du texte à partir d'une zone de texte HTML, et d'appeler la méthode create() lorsqu'un bouton "Soumettre" est pressé. La méthode est d'essayer d'utiliser le message dans la zone de texte, et après que, à sa propre balise p avec classe, et après un timbre à date dans sa propre balise p, et de sa propre classe.

Ces deux sont dans la div 'commentaires'. L'erreur que j'obtiens (à l'aide d'outils de développement de Chrome), est

Uncaught TypeError: Ne peut pas appeler une méthode appendChild' null.

Ce qui est destiné à "cmt.appendChild(divTag);". Je suis très nouveau à Javascript, et c'est juste pratique pour moi d'améliorer mes compétences. Toute aide est grandement appréciée!

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);
}
Êtes-vous sûr var cmt = document.getElementById('comments'); est appelé après que l'élément d'ID "commentaires" est créé?
Oui, mon Javascript est à l'extérieur de ma page HTML.

OriginalL'auteur Fizzix | 2013-02-18

  1. 6

    L'erreur que vous obtenez suggère qu'il n'existe pas d'élément avec l'ID "commentaires" sur votre page. document.getElementById sera de retour null lorsque aucun élément avec un ID se trouve, et donc cmd.appendChild(divTag) sera exécuté comme null.appendChild(divTag).

    Si vous êtes certain que l'élément existe, vous devrez peut-être l'exécution de votre code JavaScript qui affecte le cmt variable avant que l'élément est créé par le navigateur. Pour éviter cela, la pratique standard consiste à placer le <script> balise qui comprend votre JavaScript externe juste avant la fermeture </body> tag.

    Si vous ne pouvez pas déplacer votre balise de script pour une raison quelconque, essayez d'exécuter le code qui affecte la variable avec $(document).ready() (jQuery) ou l'équivalent.

    Ce Javascript est à l'extérieur de ma page HTML. J'ai certainement une div dans mon HTML avec l'ID de 'commentaires'. Bien que, la div est complètement vide et est en attente de ce texte pour être placé à l'intérieur.
    Merci s'accoupler, ajouté mon code APRÈS mon div est en cours de création, et a parfaitement fonctionné. Merci à tous pour votre aide, a été d'une grande aide pour moi! 🙂
    +1, maintenant je sais quoi d'autre pourrait fonctionner si jQuery n'est pas une option. Nice.
    Placer le script avant de le </body> doit être considérée comme une pratique standard, pas l'alternative.
    Vous êtes correct. Il a été très malheureusement formulée depuis (pour certaines raisons), j'ai eu l' </body> idée... 🙁 Modifié, bien 🙂

    OriginalL'auteur fresskoma

  2. 1

    Votre code fonctionne si ces éléments existent. Comme vous pouvez le voir dans ce Violon.

    Fonctionne si le HTML est similaire à:

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

    Ma conjecture est que l'un des identificateurs peuvent être mal orthographié ou l'élément que vous vous attendez à ce qu'il n'existe pas.

    Toutefois, si vous exécutez le script dans un fichier externe, il peut essayer de l'exécuter avant que le document est entièrement chargé, par conséquent, votre script est en se référant à des éléments qui ne encore prêt dans les DOM.

    En jQuery vous envelopper d'une $(document).ready(function(){//your code here..}) autour de.

    Il y a quelques détails sur la façon de le faire en JavaScript dans ce post: Recherche Prêt équivalent sans jQuery.

    C'est tellement bizarre, depuis que j'ai également testé c'est le Violon et il a parfaitement fonctionné. J'ai un div avec l'ID de "commentaires" dans mon document HTML. Mon document HTML est un lien vers mon Javascript document dans l'en-tête (évidemment), et mes div avec l'ID de 'commentaires' est d'être proche de la fin de mon document HTML. Cela aurait-il quelque chose à faire avec elle?
    Sans jQuery je pense que c'est plus compliqué comme vous pouvez le voir sur le lien exemple. Avoir un aller à ce x3ro a suggéré au sujet de la <script> balise près de la </body> tag.
    Fera, sera certainement pour essayer et commencer à ajouter quelques jQuery pour me sauver beaucoup de déconner. Merci!

    OriginalL'auteur Nope

  3. 1

    En fait, son code est très bien. C'est juste que le JavaScript s'exécute AVANT que le HTML. Une solution simple est de nest tout votre code à l'intérieur d'une fonction avec n'importe quel nom. Ensuite, utilisez la fenêtre.onload pour exécuter la fonction après le HTML est chargé. donc en gros:

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

    Ceci est particulièrement utile si vous ne voulez pas déplacer votre balise de script. De manière générale, j'aime bien laisser la balise où il est.

    OriginalL'auteur Brendan