JavaScript – Troubleshooting

Soms kan het zijn dat je vastloopt met je JavaScript code. Op deze pagina hebben we een aantal veelvoorkomende problemen én oplossing verzameld.

1. Console

We gebruiken in je browser de Developer Console om ons te helpen problemen op te sporen.

Firefox: Ctrl Shift I of F12 (op Windows) of Ctrl Option I (op Mac).
Chrome: Ctrl Shift J (op Windows) of Ctrl Option J (op Mac).

Je ziet hier alle errors en warnings. Wij zijn alleen geïnteresseerd in errors, want warnings zijn niet belangrijk.

Staan er in de console geen meldingen, of alleen warnings? Ga dan door naar stap 2.
Zie je wel een foutmelding? Ga dan door naar stap 3.

2. Geen errors in de console

We gaan eerst testen of JavaScript überhaupt wel gestart is. Plak de volgende code als eerste regel in je JavaScript bestand:

console.log('hello world');

Je zou nu hello world in de console moeten zien.

Ik zie geen hello world

JavaScript wordt niet gestart. Controleer of je het juiste JavaScript hebt gekoppeld aan het HTML bestand.
Het HTML bestand en het script bestand moeten in hetzelfde mapje zitten.
Aan het eind van de body van je HTML pagina, vlak voor de </body> tag, moet het volgende staan:

<script src="script.js"></script>

Ik zie wél hello world

JavaScript wordt in ieder geval gestart, maar misschien de rest van je code niet.

Als je functies in je code hebt, worden die wel gestart? Een functie starten doe je bijvoorbeeld met onclick (zie JavasScript les 1) of met setInterval (zie les 2). Je kunt controleren of je functies gestart worden door bovenstaande console.log in de functie te plaatsen.

Je kunt de console ook gebruiken om te kijken wat er met een variabele gebeurt. Heb jij een variabele waar bijvoorbeeld mee gerekend wordt, dan kun je het resultaat bekijken met:

console.log('naam van je variabele');

Wordt al je code uitgevoerd, en heb je geen errors in je code, maar gebeurt er toch niet wat je wil? Dan zit het probleem in de logica van de code. Oftewel: JavaScript denkt dat het doet wat jij bedoeld hebt, maar de code klopt niet met wat jij bedoelt. Neem stukje bij beetje je code opnieuw door, probeer te isoleren waar het mis gaat. Bouw desnoods een deel van je code opnieuw op. En vergeet vooral niet om met console.log in kleine stapjes te checken wat je programma doet!

3. Errors in de console

Allereerst is het goed om te weten dat je vaak kunt zien in welke regel code de fout zit.
Op deze afbeelding zie je dat de console aangeeft dat er een fout zit op regel 14 van script.js.

Staat er ook een regelnummer bij jouw foutmelding? Kijk dan eerst even op die regel, misschien is de (typ)fout wel overduidelijk.

Om verder te komen is het belangrijk dat we kijken wélke foutmelding je krijgt

Uncaught ReferenceError: NAAM is not defined

Je verwijst naar iets wat niet bestaat. Is NAAM de naam van een variabele? Dan moet je die variabele wel eerst aanmaken met var NAAM = ...;

favicon.ico: Failed to load resource: the server responded with a status of 404 (Not Found)

Je krijgt deze foutmelding omdat je geen favicon hebt. Dit is niet erg, maar als je van die vervelende foutmelding afwilt kun je een favicon maken voor je site. De gelinkte site legt uit hoe.

Uncaught TypeError: Cannot read property ‘style’ of null / Cannot set property ‘innerHTML’ of null

Je probeert de style of innerHTML te veranderen van een element dat JavaScript niet kan vinden. Misschien heb je met document.querySelector een verwijzing gemaakt naar een id, maar een typfout gemaakt in de naam van de id? Controleer je HTML bestand, welk element probeer je aan te passen, welke id heeft het, en heb je daar een juiste verwijzing naar gemaakt in JS?

Deze foutmelding zie je ook als je de <script> tag niet als laatste element in je body hebt gezet. De <script> tag moet altijd helemaal onderaan, vlak vóór de </body> tag staan.

Krijg je een foutmelding die hier nog niet vermeld staat? Laat het ons weten, dan voegen we die toe!