En tant que développeur web, vous êtes amené à rencontrer des erreurs lorsque vous travaillez avec JavaScript. Les erreurs de code empêchent le programme de faire ce qui est attendu.

Pour pouvoir corriger ces erreurs, vous devez être en mesure de comprendre le message d’erreur, car cela vous aidera à comprendre pourquoi l’erreur a été soulevée et comment la corriger.

Dans ce tutoriel, nous allons parler de l’erreur « uncaught typeerror : cannot set property » en JavaScript.

Vous apprendrez pourquoi cette erreur se produit, les différentes raisons pour lesquelles vous pouvez la rencontrer et les différentes méthodes pour la corriger.

Que signifie « Uncaught Typeerror : Cannot Set Property » en JavaScript ?

Une erreur de type typeerror se produit principalement lorsque vous effectuez une opération impliquant des types de données incompatibles. Dans notre cas, il s’agit de l’erreur « uncaught typeerror : cannot set property », une erreur JavaScript qui se produit principalement lorsque vous essayez d’assigner une propriété à un élément DOM avec une valeur null.

Cette erreur peut être déclenchée pour différentes raisons :

  • Placement de la balise script à la mauvaise position dans votre balisage
  • Erreurs d’orthographe lors du référencement d’éléments DOM
  • Accès à un élément DOM non défini ou invalide

Dans les sections suivantes, nous discuterons des raisons ci-dessus, de la manière dont elles peuvent provoquer l’erreur « uncaught typeerror : cannot set property » avec des exemples de code, et de la manière de corriger l’erreur.

Nous verrons également comment vous pouvez déterminer si une variable est null ou undefined.

Commençons !

Comment corriger l’erreur « uncaught typeerror : cannot set property » en JavaScript ?

Dans cette section, vous apprendrez à connaître les causes courantes de l’erreur « uncaught typeerror : cannot set property » en JavaScript. Chaque sous-section qui suit est consacrée à l’une de ces causes et à sa solution.

Vous pourrez également visualiser comment corriger l’erreur à l’aide de quelques exemples de code pratiques.

Placement incorrect de la balise script

Lorsqu’une page web se charge, le code JavaScript écrit pour cette page se charge également. La façon dont JavaScript reconnaît le modèle d’objet du document (DOM) dépend de l’endroit où vous placez la balise script dans votre code.

Si vous placez la balise script dans la balise head ou au-dessus de tous les éléments HTML dans la balise body, le script sera exécuté avant que le DOM ne soit prêt.

Lorsque JavaScript est exécuté avant que le DOM ne soit prêt, il ne parvient pas à obtenir une représentation complète du DOM, ce qui signifie que la plupart de vos variables liées aux éléments du DOM seront renvoyées sous la forme null.

Voici un exemple de code qui soulèverait l’erreur « uncaught typeerror : cannot set property » en JavaScript en raison de la position de la balise script:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>

Dans le code ci-dessus, la balise script est placée à l’intérieur de la balise head. Nous avons également un élément h1 avec un id de heading.

Ensuite, nous allons essayer d’assigner du texte à l’élément h1:

let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Bien que le code ci-dessus semble correct, l’erreur « uncaught typeerror : cannot set property » a été levée. Cela s’explique par le fait que le script a déjà été chargé avant le DOM, et que notre JavaScript n’a donc aucune connaissance des éléments du DOM.

Cette erreur se produira également si vous placez la balise script au-dessus d’autres éléments du DOM :

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="heading"></h1>
  </body>
</html>

La balise script se trouve maintenant au-dessus des éléments du DOM dans la balise body, mais l’erreur « uncaught typeerror : cannot set property » se produira toujours, car le script se charge avant le DOM.

Pour corriger cette erreur, vous devez placer la balise script juste avant la balise de fermeture body. De cette manière, tous les éléments du DOM se chargeront avant le script.

Voici un exemple de placement correct :

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'

Lorsque le code ci-dessus est exécuté, l’élément h1 aura son textContent défini comme « This is a heading ». Il n’y aura pas d’erreur.

Fautes d’orthographe

Les fautes d’orthographe sont une autre source d’erreur « uncaught typeerror : cannot set property ».

Lorsque vous vous trompez dans l’orthographe de l’attribut (ID ou classe) utilisé pour identifier un élément DOM en JavaScript, vous faites référence à un élément inexistant, ce qui renverra une valeur null.

Si vous essayez d’attribuer une valeur à une valeur null, vous obtiendrez l’erreur « uncaught typeerror : cannot set property ».

Voici un exemple de code pour vous aider à comprendre :

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Dans le code ci-dessus, nous avons une balise h1 avec une balise id de heading.

Dans le code JavaScript, nous avons fait référence au id mais avec une faute d’orthographe. Au lieu de « heading », nous avons écrit « headin », c’est-à-dire document.getElementById('headin'); au lieu de document.getElementById('heading');.

Pour éviter de telles erreurs, assurez-vous toujours que vos éléments DOM sont référencés correctement, en utilisant le bon attribut avec l’orthographe appropriée.

Accéder à un élément DOM non défini

Dans la dernière section, nous avons vu comment le référencement d’un attribut mal orthographié peut générer une erreur de type « uncaught typeerror : cannot set property ». Il en va de même lorsque nous essayons d’accéder à un élément du DOM qui n’existe pas.

Dans l’exemple ci-dessous, nous allons essayer d’accéder à un attribut id qui n’a pas encore été défini dans le balisage :

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Comme on peut le voir ci-dessus, nous essayons de définir l’attribut textContent d’un élément DOM qui n’existe pas. Il n’y a pas d’élément dans notre code HTML qui ait un id de « heading », donc cela renvoie une valeur null.

Si vous continuez à enregistrer la variable heading dans la console, vous obtiendrez la valeur null.

Comment déterminer si une variable est « null » ou « undefined » ?

À ce stade, vous avez compris que l’attribution d’une valeur à une variable qui est null ou undefined entraînera très probablement une erreur « uncaught typeerror : cannot set property ».

Mais vous pouvez déterminer si une variable est null ou undefined; avant d’interagir avec elle. Bien que cela ne corrige pas l’erreur, cela permet de comprendre pourquoi une fonctionnalité ne fonctionne pas.

Avant de voir comment déterminer si une variable est null ou undefined en JavaScript, il est important de comprendre la différence entre une valeur null et une valeur undefined.

Une variable est null lorsqu’une valeur vide ou inconnue lui est affectée. Les sections précédentes de ce tutoriel montrent des exemples pratiques d’une variable null.

En revanche, une variable est undefined quand aucune valeur ne lui a été attribuée :

let age;
console.log(age);
// undefined

Dans le code ci-dessus, la variable age a été déclarée, mais aucune valeur ne lui a été attribuée. Lors de l’enregistrement dans la console, undefined a été renvoyé.

Maintenant que vous connaissez la différence entre null et undefined, voyons comment vous pouvez déterminer si une variable est l’une ou l’autre.

Vous pouvez utiliser l’opérateur d’égalité libre (==) pour déterminer si une variable est null ou undefined. Voici un exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="headin"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}

Dans le code ci-dessus, nous avons fait une erreur d’orthographe en référençant un élément DOM en JavaScript.

En utilisant une instruction if, nous avons vérifié si la valeur de la variable heading était null: if (heading == null) {...}

Puisque la valeur retournée est null, le message « Variable is null – cannot assign value to a null variable » sera enregistré dans la console. Si nous n’avions pas obtenu la valeur null, le code du bloc else aurait été exécuté.

Si vous vous demandez pourquoi nous n’avons pas inclus undefined dans la déclaration if, c’est parce que null == undefined est en JavaScript, de sorte que le code de la déclaration if vérifie les deux erreurs.

Résumé

Les messages d’erreur peuvent être déroutants dans certains cas, mais ils aident les développeurs à comprendre pourquoi leur code ne fonctionne pas afin de le corriger et d’éviter que cela ne se reproduise.

Bien que personne n’aime les erreurs, elles sont un bon moyen de vous aider à mieux comprendre votre langage de programmation préféré.

De plus, la correction d’une erreur de code vous donne plus de contexte lorsque vous rencontrez une erreur similaire dans un autre projet. L’erreur dont nous avons parlé dans cet article n’est pas seulement soulevée lorsque vous travaillez sur des projets JavaScript vanille – vous pouvez également la rencontrer lorsque vous travaillez avec des frameworks et des bibliothèques JavaScript.

Si vous voulez créer une application ou un site web, il y a une variété de compétences à apprendre et beaucoup de pratique nécessaire pour utiliser ces compétences de manière efficace. Le nouveau niveau Hobby de Kinsta constitue la plateforme d’hébergement idéale pour tous ceux qui ont besoin d’un espace pour s’entraîner, qu’il s’agisse de nouveaux codeurs en plein essor ou de développeurs expérimentés qui cherchent à faire connaître leur travail ou à déployer des applications à l’état de prototype. Et si vous vous inscrivez à n’importe quel niveau aujourd’hui, vous bénéficierez d’une réduction de 20 $ sur votre premier mois.