Les erreurs fréquentes

Cherchez ici avant d’appeler à l’aide

D’abord : ouvrez la console

F12 → onglet Console.

Le message d’erreur vous donne le problème et le numéro de ligne. Même en anglais, il faut le lire : c’est plus rapide que de chercher au hasard.

Ma page est blanche / rien ne s’affiche

Cause Vérification
Fichier pas enregistré Ctrl+S
Contenu écrit dans le <head> au lieu du <body> Relire la structure
Balise mal fermée qui « avale » la suite Shift+Alt+F : si l’indentation part en escalier, c’est là
Live Server pointe sur une autre page Regarder la fin de l’adresse dans le navigateur

Mon CSS ne s’applique pas

ImportantCause n°1 : le <link> manque 
<head>
  <link rel="stylesheet" href="style.css" />
</head>

Vérifiez qu’il est là, dans le <head>, et que le nom du fichier correspond exactement.

Autres causes :

Cause Exemple
Point oublié devant la classe intro { } au lieu de .intro { }
Casse différente HTML class="Titre", CSS .titre
Point-virgule oublié La ligne suivante est ignorée
Faute dans le nom de la propriété colour, font-weigth
Une autre règle plus précise gagne L’inspecteur montre la règle barrée

L’outil qui répond en 5 secondes : clic droit sur l’élément → Inspecter. Le panneau de droite montre exactement quelles règles s’appliquent.

Cannot read properties of null

C’est l’erreur JavaScript la plus fréquente. Elle veut dire : « querySelector n’a rien trouvé ».

Uncaught TypeError: Cannot set properties of null (setting 'textContent')
Cause Solution
Le # ou le . manque querySelector("#titre"), pas querySelector("titre")
Faute de frappe / casse #Titre ≠ #titre
Le <script> est trop haut Il doit être juste avant </body>
L’élément n’existe pas dans le HTML Vérifier l’id dans le fichier HTML

X is not defined

Le nom n’existe pas. Trois causes :

console.log(prenom);           // ❌ variable jamais créée
const x = Camille;             // ❌ texte sans guillemets
consol.log("test");            // ❌ faute de frappe (console)

X is not a function

const t = "bonjour";
t.push("!");        // ❌ push existe sur les tableaux, pas sur les textes

const o = JSON.parse('{"nom":"a"}');
o.resume();         // ❌ JSON.parse rend des objets SANS méthodes

Vérifiez le type de ce que vous manipulez : console.log(typeof x).

Mon nombre se comporte comme du texte

"5" + 3        // "53"   au lieu de 8
champ.value + 1 // "191" au lieu de 20

.value et .textContent renvoient toujours du texte.

Number(champ.value) + 1  // ✅

Symptôme inverse : NaN s’affiche → une conversion a échoué.

Mon formulaire recharge la page

Il manque event.preventDefault().

formulaire.addEventListener("submit", (event) => {
  event.preventDefault();   // ← première ligne, toujours
  …
});

Symptôme typique : le résultat apparaît un dixième de seconde puis disparaît.

Promise { <pending> } dans la console

Un await a été oublié.

const reponse = await fetch(url);      // ← await
const donnees = await reponse.json();  // ← await ici AUSSI

Et la fonction doit commencer par async.

Mon compteur reste bloqué à 1

La variable est déclarée à l’intérieur de l’écouteur, donc recréée à chaque clic.

// ❌
bouton.addEventListener("click", () => {
  let compteur = 0;
  compteur = compteur + 1;
});

// ✅
let compteur = 0;
bouton.addEventListener("click", () => {
  compteur = compteur + 1;
});

Ma liste n’affiche que le dernier élément

Dans la boucle, = écrase au lieu d’ajouter.

// ❌
for (const x of tableau) {
  liste.innerHTML = `<li>${x}</li>`;
}

// ✅
let html = "";
for (const x of tableau) {
  html = html + `<li>${x}</li>`;
}
liste.innerHTML = html;

Mon image ne s’affiche pas

  1. Le fichier est-il dans le même dossier que le .html ?
  2. Le nom correspond-il exactement ? Photo.JPG ≠ photo.jpg
  3. L’extension est-elle la bonne ? (.jpeg et .jpg sont différents)
  4. Le chemin ne doit jamais commencer par C:\Users\…

Mon accolade / parenthèse : Unexpected token

Il manque ou il y a en trop une }, ) ou ;.

La méthode : Shift+Alt+F. Si l’indentation devient absurde, la fermeture manquante est juste avant l’endroit où ça dérape.

Et vérifiez la fin des écouteurs :

bouton.addEventListener("click", () => {
  …
});     // ← accolade, parenthèse, point-virgule

Les accents s’affichent é

Le <meta charset="UTF-8" /> manque dans le <head>.

Le terminal dit command not found

  • Vérifiez l’orthographe
  • Vérifiez que vous êtes dans le bon dossier (pwd)
  • Windows Si PowerShell parle de execution policy, basculez le terminal sur Git Bash ou cmd (voir le mémo terminal)

Rien de tout ça ne marche

AstuceLa méthode du canard en plastique

Expliquez votre problème à voix haute, ligne par ligne, comme si vous l’expliquiez à quelqu’un qui ne connaît rien.

Ça a l’air ridicule. Ça marche une fois sur deux : en formulant, on voit l’erreur.

Si ça ne suffit pas, appelez — et montrez le message de la console.