Forum : Connot Read Properties of null

J'ai le message d'erreur suivant:

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLButtonElement.<anonymous> (index.js:5:7

Fichier HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Events</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="clickEvent">
      <button id="btn">Appuyez !</button>
      <br />
      <img src="./terre.jpg" id="img " alt="" />
    </div>

    <script src="./index.js"></script>
  </body>
</html>

Code Javascript

const btn = document.querySelector("#btn");
const img = document.getElementById("img");

btn.addEventListener("click", () => {
  img.classList.toggle("show");
});

Code CSS

* {
  border-radius: 30px;
  padding: 8px;
  text-align: center;
}

body {
  min-height: 100vh;
  transition: 5s;
}

img {
  margin: 0 auto;
  height: 200px;
  visibility: hidden;
}

.show {
  visibility: visible;
}

Ce que je veux

Obtenir un event lorsque je clique sur un bouton

Ce que j'obtiens

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLButtonElement.<anonymous> (index.js:5:7

Merci de votre retour

d4xtian

Auteur

Je vois que mon soucis viens de cette ligne.

img.classList.toggle("show");

je suppose que j'ai un soucis avec le "classList"

d4xtian

Auteur

Bon je viens de trouver mon erreur et c'est en essayant de comprendre la signification de l'erreur et du fonctionnement du code que j'ai trouvé mon erreur qui était une simple erreur de frappe... je vais essayer de ll'expliquer, pour voir si j'ai bien saisi

Dans mon script js,

je crée créer une variable "img"
```
const img
```

a qui j'ai donné la valeur de l'id de la ballise "img" qui se trouve dans mon fichier html

= document.getElementById("img");

je créé une variable "btn"
```
const btn
```

a qui j'ai donné la valeur de l'id de la ballise "btn" qui se trouve dans mon fichier html

= document.querySelector("#btn");

J'appelle la méthode
```
addEventListener
```

de btn qui attache une fonction (click) qui sera appeler à chaque fois que l'évènement spécifié est envoyé à btn

() => {
  img.classList.toggle("show");

Je demande à js de afficher et démasquer l'image qui est a l'id que j'ai donné à ma variable "img" à chaque fois que l'event arrive sur mon "btn"

img.classList.toggle("show");

cette erreur mais retournée, tout simplement parcequ'il ne trouve pas l'id qui porte la valeur "img" que j'ai donné dans l'initialisation de ma variable, tout simplement parce que dans mon code Html, dans les attributs (id) de la balise img, j'avais ajouté par erreur un espace au lieur de "img" j'avais "img "

On me l'avait dit, la vie de codeur c'est de passer son temps à chercher pourquoi ça ne marche pas....environ 1h de recherche lol...#Ilovecoding

Connot Read Properties of null

2 réponses