Intereting Posts

La fonction DOM fonctionne dans la console mais pas en extension, malgré l'attente d'une charge Comment forcer les outils de débogage Chrome à déboguer dans un joli code? L'API visibilité de la page ne fonctionne pas sur Chrome OS X lorsque la fenêtre est minimisée Utilisation de la boucle angulaire de la foreach pour réorganiser JSON Désactiver l'utilisateur pour appeler des fonctions à partir de la console dans le navigateur Web Quels fichiers javascript ne sont PAS utilisés sur le chargement de la page Comment exécuter un script shell à partir d'une page HTML? Parse cloud code nouveau SDK include subclass ne fonctionne pas Appel de fonction lente dans V8 lorsque vous utilisez la même touche pour les fonctions dans différents objets Comment utiliser javascript intégrée aux arguments correctement? Comment esquiver jQuery promet-il complètement en chaînant deux fonctions jQuery asynchrones? Comment puis-je tourner à 2 décimales? Le client Node.js très simple lance une erreur ENOBUFS après de nombreuses requêtes HTTP Quelle est la différence entre un signe dollar et un signe dollar suivi d'une période de JQuery? Quels sont les avantages et les inconvénients de la transmission de * toutes les variables * javascript (même indéfinies) en tant que arguments de fonction?

Impossible de définir la propriété 'innerHTML' de null

Pourquoi puis-je obtenir une erreur ou Uncaught TypeError: Impossible de définir la propriété 'innerHTML' de null? Je pensais avoir compris innerHTML et l'avoir fonctionné auparavant.

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

Vous devez placer le bonjour div avant le script, afin qu'il existe lorsque le script est chargé.

Vous devez indiquer à javascript pour effectuer l'action "onload" … Essayez avec ceci:

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

Mettez simplement votre JS dans window.onload

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

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

Javascript semble bon. Essayez de l'exécuter après le chargement du div. Essayez d'exécuter uniquement lorsque le document est prêt. $ (Document) .ready in jquery.

Voici mon extrait, essayez-le. J'espère que cela vous sera utile.

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

La partie JavaScript doit être exécutée une fois que la page est chargée. Il est conseillé de placer un script JavaScript à la fin de l'étiquette du corps

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

Je vois que tous les techniciens ont fourni la solution sur la façon de se débarrasser du problème, mais personne n'a répondu à la raison ou à la cause principale de pourquoi il se passe en premier lieu.

Pourquoi puis-je obtenir une erreur ou Uncaught TypeError: Impossible de définir la propriété 'innerHTML' de null?

Tout code javascript écrit à l'intérieur des étiquettes de script (présent dans la partie head de votre fichier HTML) est exécuté par le moteur de rendu du navigateur avant même que votre DOM entier ne soit chargé. Le navigateur charge l'intégralité du DOM HTML de haut en bas. Les scripts présents dans la balise de head tentent d'accéder à un élément ayant l'id hello même avant qu'il ait effectivement été rendu dans le DOM. Donc, évidemment, le script java a échoué à voir l'élément et donc vous finissez par voir l'erreur de référence nulle.

Comment pouvez-vous fonctionner comme avant?

Vous souhaitez afficher le message "salut" sur la page dès l'arrivée de l'utilisateur sur votre page pour la première fois. Vous devez donc brancher votre code à un moment où vous êtes complètement sûr du fait que DOM est entièrement chargé et que l'élément d'identification hello est accessible / disponible. Il est réalisable de deux façons:

Réorganisez vos scripts : de cette façon, vos scripts sont déclenchés uniquement après que le DOM contenant votre élément d'adresse hello soit déjà chargé. Vous pouvez le faire en déplaçant simplement la balise de script après tous les éléments DOM, c'est-à-dire en bas où l'étiquette du body se termine. Puisque le rendu se déroule de haut en bas afin que vos scripts soient exécutés à la fin et que vous ne rencontrez aucune erreur.

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

Vous pouvez essayer d'utiliser la méthode setTimeout pour vous assurer que votre html est chargé en premier.

Ajouter jquery dans < head>

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

Utilisez $ document.ready () : le code peut être dans < head> ou dans un fichier séparé comme main.js

1) en utilisant js dans le même fichier (ajoutez ceci dans < head> ):

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

2) en utilisant un autre fichier comme main.js (ajoutez ceci dans < head> ):

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

Et ajoutez le code dans le fichier principal.js 🙂

Vous devez changer div en p . Techniquement innerHTML signifie qu'il se trouve dans le <??? id=""></???> <??? id=""></???> partie.

Changement:

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

dans

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

Faire:

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

tournera

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

Ce qui n'a pas de sens.

Vous pouvez également essayer de changer:

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

Dans ce

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

Pour le faire fonctionner.

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

Change ça:-

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

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