Tu as écrit ton premier bouton. Il est beau. Il a border-radius. Il a un effet de survol. Tu as même ajouté une ombre. Il parfait.
Tu appuies ... Rien. Encore une fois. Rien.
Tu ouvres la console. Il y a du silence. Aucune erreur, aucun avertissement. JavaScript est silencieux, comme votre ex.
Bienvenue dans le monde du débogage. Examinons les raisons les plus courantes pour lesquelles le bouton refuse de fonctionner.
BUG 1.
Le script a été chargé avant DOM
Niveau de douleur : 🔥🔥🔥🔥🔥
C'est un classique. On t'a prévenu, tu n'as pas écouté.
// script.js — connecté dans <head>const btn = document.querySelector('.my-button');
btn.addEventListener('click', () => {
alert('It works!');
});Lorsque ce code est exécuté, les boutons sont encore n'existe pas physiquement dans DOM. querySelector renvoie null. Et null.addEventListener est TypeError, tu ne l'as pas remarqué, parce que tu ne regardais pas la console.
✅ Comment réparer :
<!-- Вариант 1: defer --><script src="script.js" defer></script>
<!-- Вариант 2: скрипт перед </body> -->Vous ne pouvez pas embrasser quelqu'un qui n'est pas encore né. Le DOM doit être prêt.
BUG 2.
Erreur de frappe dans le sélecteur
Niveau de douleur : 🔥🔥 (mais la honte — à 🔥🔥🔥🔥🔥)
// En HTML : <button class="my-button">const btn = document.querySelector('.my-buton'); // un 't' 💀querySelector ne renvoie pas d'erreur si l'élément n'est pas trouvé. Il renvoie simplement null en silence. Et vous vous asseyez et pensez que JavaScript est cassé.
✅ Comment rechercher :
const btn = document.querySelector('.my-buton');
console.log(btn); // null - ah, te voilà, scélératSi quelque chose ne fonctionne pas, console.log tout. Ce n'est pas un « sale hack », c'est un outil. Même les seniors le font. Surtout les seniors.
BUG 3.
addEventListener avec erreur
Niveau de douleur : 🔥🔥🔥
// Vous pensez que vous avez accroché le gestionnaire :
btn.addeventlistener('click', handleClick);
// JS : « Qu'est-ce que addeventlistener ? Je ne connais pas ça »at"
// Correct :
btn.addEventListener('click', handleClick);JavaScript est un langage sensible à la casse. addEventListener — exactement comme ça, en majuscules E et LUne lettre dans le mauvais registre et vous êtes ignoré.
Et il arrive aussi que vous ayez défini une fonction, mais que vous ayez oublié d'accrocher le gestionnaire. La fonction est là, mais addEventListener est introuvable. Le code est silencieux.
BUG 4.
Chevauchement d'élément (z-index)
Niveau de douleur : 🔥🔥🔥🔥
Il y a un bouton. Il y a un gestionnaire. Le code est correct. Mais le clic ne fonctionne pas.
Motif : au-dessus du bouton se trouve un div transparent. C'est peut-être une superposition modale que vous avez oublié de supprimer. Peut-être un bloc positionné en absolu avec z-index: 9999. Peut-être que le pseudo-élément ::after s'est propagé.
✅ Comment trouver :
// Ce code montrera ce que le clic obtient RÉELLEMENT
document.addEventListener('click', (e) => {
console.log('Clicked on:', e.target);
});DevTools → clic droit → « Explorer l'élément ». Si le bouton n'est PAS sélectionné, c'est lui le coupable.
BUG 5.
onclick est réécrit
Niveau de douleur : 🔥🔥🔥
// ❌ onclick est une propriété. Nouvelle valeur = l'ancienne a disparu
btn.onclick = () => console.log('First');
btn.onclick = () => console.log('Second');
// SEULEMENT le deuxième fonctionnera !
// ✅ addEventListener AJOUTE, ne remplace pas
btn.addEventListener('click', () => console.log('First'));
btn.addEventListener('click', () => console.log('Second'));
// Les DEUX fonctionneront ✨onclick — comme une variable : a attribué une nouvelle — l'ancienne a disparu. addEventListener — comme un tableau : ajoute, ne remplace pas.
BUG 6.
Appeler une fonction au lieu de transmettre un lien
Niveau de douleur : 🔥🔥🔥🔥🔥 (parce que je ne comprends pas ce qui se passe)
Un piège dans lequel on tombe tout débutants :
function sayHello() {
alert('Hi!');
}
// ❌ La fonction est appelée IMMÉDIATEMENT, pas par un clic
btn.addEventListener('click', sayHello());
// ✅ Nous transmettons le LIEN — JS appellera plus tard
btn.addEventListener('click', sayHello);La différence est entre parenthèses. sayHello() — « appelle ta mère maintenant devant tout le monde ». sayHello — « appelle ta mère quand il y aura un clic ».
BUG 7.
Bouton à l'intérieur du formulaire (preventDefault)
Niveau de douleur : 🔥🔥🔥🔥
<form><button>Отправить</button></form><!-- Нажимаешь — страница перезагружается 💀 --><button> à l'intérieur du formulaire par défaut a type="submit". Le formulaire est envoyé, la page est mise à jour, votre console.log clignote et disparaît.
✅ Comment réparer :
<!-- Вариант 1: указать type --><button type="button">Не отправляй форму!</button>Et la situation inverse : quelqu'un au-dessus du DOM a accroché stopPropagation(), et l'événement ne se produit tout simplement pas. Bienvenue dans le monde des événements émergents - c'est une quête à part entière.
BUG 8.
Élément dynamique - le gestionnaire est suspendu avant la création
Niveau de douleur : 🔥🔥🔥🔥
// Accrocher le gestionnaire
document.querySelector('.dynamic-btn').addEventListener('click', handler);
// Ensuite, créez un bouton via innerHTML
container.innerHTML = '<button class="dynamic-btn">Click</button>';
// Nouveau bouton — AUTRE objet. Le gestionnaire n'y est pas attaché.✅ La solution est la délégation d'événements :
// Nous accrochons le gestionnaire au PARENT, qui existe toujours
document.querySelector('.container').addEventListener('click', (e) => {
if (e.target.matches('.dynamic-btn')) {
handler();
}
});La délégation d'événements est l'un des modèles les plus importants de JavaScript. Souvenez-vous-en, aimez-le, vivez avec lui.
📋 Liste de contrôle « le bouton ne fonctionne pas »
Avant d'écrire sur Stack Overflow « AIDEZ-MOI RIEN NE FONCTIONNE », parcourez la liste :
Vous avez ouvert la console ? — Sinon, ouvre-le. Tout de suite. F12.
L'élément existe-t-il ? —
console.log(querySelector(...))n'est pas null ?Script après DOM ? — defer / DOMContentLoaded / script avant
</body>.Le sélecteur est-il correct ? — Vérifiez les classes, les identifiants, les fautes de frappe.
addEventListener est-il correct ? - Registre, parenthèses, tout est en place ?
Vous transférez la fonction ? —
handlervshandler().Rien ne se chevauche ? — DevTools → Inspecter → qu'est-ce qui se démarque ?
Élément dynamique ? — Utilisez la délégation.
🚀 Vous voulez vraiment vous améliorer ?
Déboguer est amusant (enfin, presque). Mais pour vraiment comprendre pourquoi quelque chose se casse, vous devez comprendre les bases : DOM, boucle d'événements, fermetures, this...
Essayez Code - une application où vous pouvez apprendre la programmation à travers des tâches réelles. Pas de « lire et oublier », mais « écrire le code → vérifier le résultat ». JavaScript, Python, HTML/CSS et d'autres langages avec des tâches interactives.
Et aussi, entrez dans notre Chaîne Telegram — analyses de tâches, mini-leçons, aide-mémoire et mèmes sur le développement. Répétez la programmation dans un endroit pratique : dans la file d'attente, dans les transports ou « encore 5 minutes avant de vous coucher ».
Sagesse finale
90 % des « bogues complexes » sont des fautes de frappe, un mauvais ordre de chargement et de l'inattention. Cela peut sembler offensant, mais c'est une bonne nouvelle : plus vous déboguez, plus vite vous trouvez le problème.
Dans six mois, tu verras les bogues en 3 secondes.
En attendant, ouvrez la console. Ouvrez toujours la console.
🐛 Happy debugging