Setproperty Javascript

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

Le innerHTML propriété vous permet de définir le contenu d’un élément en utilisant JavaScript.

Si vous spécifiez un valeur élément non valide avec laquelle utiliser la méthode innerHTML ou si vous placez le script avant que l’élément est affiché sur la page, vous rencontrerez l’erreur "Uncaught TypeError: impossible de définir la propriété "innerHTML" null" . erreur

Dans ce guide, nous discutons de ce que signifie cette erreur et pourquoi vous pouvez le rencontrer. Nous examinerons un exemple de cette erreur afin que vous puissiez apprendre à le fixer dans votre code JavaScript

Uncaught TypeError:. Impossible de la propriété set "innerHTML" de null

InnerHTML la propriété est liée à tout élément Web que vous travaillez avec JavaScript. Vous avez sélectionné un élément Web à partir de la page en utilisant un "getter" , comme getElementById () , ou que vous avez créé un élément en JavaScript que vous voulez modifier.

"ne peut pas définir la propriété "innerHTML" de null" erreur est une erreur de type. Cela signifie que nous essayons d’appliquer une propriété ou une fonction à une valeur qui ne supporte pas une propriété ou une fonction.

Dans ce cas, nous essayons de définir la valeur de innerHTML à une égale élément. nULL. Les valeurs NULL ne sont pas une propriété innerHTML

Il y a deux causes fréquentes de cette erreur.

  • Insertion d’ un script avant un élément apparaaît sur la page web
  • Référez - vous au mauvais ID d’élément.

Nous allons analyser la cause première, ce qui est probablement la plus erreur commune faite par les débutants.

un exemple de scénario

Nous allons écrire un site simple qui montre le temps. Pour commencer, définir une page HTML de base. Cette page HTML sera la toile sur laquelle nous affichons le temps:

Cette page HTML contient un et . La balise contient un

</pre> </code> qui définit le titre de la page Web. Le <code><body> </code> contient un paragraphe </p>  </a> </div> <p>dans le paragraphe, nous avons ajouté une <a href="/html-span/"> <span> </a>. nous allons remplacer le contenu de cette balise avec l’heure actuelle dans notre code JavaScript </p> <p>Ensuite, écrire un script pour récupérer le temps , nous ajouterons ce code JS dans le <code><head> </code>:.. </p>  <p>Notre document contient maintenant HTML et JavaScript. <code>getElementById () </code> récupère notre balise span <code>SHOW_TIME </code>. Nous récupérons ensuite la date actuelle en utilisant la balise <ah ref = "/ JavaScrip t-Date / "> JavaScript module date </a>. </p> <p>Dans la ligne de code suivante, nous créons une chaaîne qui affiche l’heure actuelle du jour et de minutes de l’heure. Cette chaaîne utilise la structure suivante: </p> <p><code>HH: MM </code> </p> <p>Il y a deux points qui séparent les valeurs des heures et minutes. Nous créons cette chaaîne en utilisant une technique appelée <a href="/javascript-string-interpolation/"> interpolation chaaîne JavaScript </a>. Cela nous permet d’intégrer plusieurs valeurs dans la même chaaîne. Enfin, nous utilisons la méthode innerHTML pour afficher cette fois -ci sur notre page web </p> <p>la page de notre web open Let dans le navigateur Web. </p> <figure class = "wp- l’ image bloc- "> <img src =" https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw "alt =" AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw "> </ figure> <p>notre page Web ne peut pas afficher l’heure. Si nous regardons la console JavaScript, nous pouvons voir une erreur: </p>  <p>Ceci est une autre représentation du "ne peut pas mettre ’innerHTML’ propriété sur null". Il nous dit que l’élément que nous essayons de définir la valeur de innerHTML à est nulle. </p> <h2> La solution</h2><p>Puisque la valeur de <code>SHOW_TIME </code> est nul, on peut en déduire que JavaScript n’a pas pu récupérer correctement l’élément dont l’ ID est <code>SHOW_TIME </code>. </p> <p>Dans ce cas, la cause est que nous sommes entrés dans notre <code>< ; script> </code> trop tôt dans notre emploi du temps. Notre <code> ... </pre> </div> <p>Nous avons déplacé notre <code> </div> <h2> Conclusion</h2><p>L’erreur "Uncaught TypeError: Impossible de définir la propriété ’innerHTML’ null" L’erreur est causée en essayant de définir une valeur innerHTML pour un élément dont la valeur est égale à zéro. </p> <p>Pour corriger cette erreur, assurez - vous que votre <code><script> </code> vient après l’élément que vous souhaitez sélectionner dans votre script. Si cela ne résout pas le problème, assurez - vous de sélectionner un élément valide dans votre programme. </p>