---
name: dom-ready-checker
description: Détecte et résout les erreurs de timing DOM en JavaScript. Utilise ce skill quand getElementById ou querySelector retourne null, quand des scripts s'exécutent avant le chargement du DOM, ou quand il y a des erreurs Cannot read properties of null.
keywords: [dom, getElementById, querySelector, null, timing, DOMContentLoaded, chargement dom, script timing, cannot read null, dom error, dom not ready, js timing]
---
# DOM Ready Checker
Un skill pour détecter et résoudre les erreurs courantes de timing DOM en JavaScript, notamment lorsque `getElementById()` ou `querySelector()` retourne `null` parce que le script s'exécute avant que le DOM ne soit complètement chargé.
## Quand l'utiliser
1. **Quand un projet web ne fonctionne pas au chargement** : les boutons ne répondent pas, les canvas ne s'affichent pas, et la console montre `Uncaught TypeError: Cannot read properties of null` ou `getElementById(...) is null`.
2. **Quand tu modifies un fichier HTML existant** et que tu ajoutes de nouveaux éléments avec des IDs, et que tu veux t'assurer que le JavaScript les trouvera correctement.
## Instructions
### Étape 1 : Vérifier l'erreur console
- Ouvre la page dans le navigateur (Chrome/Edge)
- Ouvre les DevTools (F12) → onglet Console
- Cherche les erreurs mentionnant `null`, `getElementById`, `querySelector`, ou `getContext`
### Étape 2 : Analyser l'ordre de chargement
- Ouvre le fichier HTML et vérifie où est placé la balise `
```
**Solution B :** Utiliser `DOMContentLoaded`
```javascript
// Dans game.js
document.addEventListener('DOMContentLoaded', function() {
// Tout ton code qui accède au DOM ici
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// ...
});
```
**Solution C :** Vérifier l'existence de l'élément avant utilisation
```javascript
const canvas = document.getElementById('gameCanvas');
if (!canvas) {
console.error('Canvas non trouvé ! Vérifie que l\'élément existe et que le script est bien placé.');
return;
}
const ctx = canvas.getContext('2d');
```
### Étape 4 : Tester la correction
- Recharge la page (Ctrl+F5)
- Vérifie que l'erreur a disparu de la console
- Teste la fonctionnalité (boutons, canvas, etc.)
## Exemples
### Input (erreur typique)
**Console :** `game.js:1 Uncaught TypeError: Cannot read properties of null (reading 'getContext')`
**HTML :**
```html
```
**game.js :**
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d'); // ERREUR ICI
```
### Output (après correction)
**HTML corrigé :**
```html
```
**Résultat :** Plus d'erreur dans la console, le jeu fonctionne correctement.
### Cas réel (du souvenir 2026-04-04)
**Problème :** `game.js` cherchait un `