Why won't my code work!? - The Beginner's Guide to Fixing JavaScript Bugs

It’s a normal part of writing code to get unexpected results from time to time. For a JavaScript beginner, though, it can be hard to know where to find your mistakes so that you can fix them.

So, if your code isn’t working and you’re not sure where the error might be, use this checklist to help you find and fix it.

Step 1: Check your files

• Look in your main website/project folder - do you have an index.html file and a scripts.js file sitting next to each other?

• Does your index.html file contain a reference to the external scripts.js file? Is the reference correct (no spelling errors, etc)?

• Are you definitely viewing the correct index.html file in the browser? Take a look at the browser’s address bar to find out

Step 2: Open the browser’s console

• Remember: to open a browser’s console to examine the code behind the page you’re viewing, right-click anywhere and choose ‘Inspect element’ - then look for the ‘Console’ tab and click on it

• Are there any errors shown there? e.g. ‘undefined’ variables - at this stage, it’s a good idea to double-check that you’ve spelled all variable and function names correctly in your code; remember that 'myVar' is not the same as 'myvar'

• Add some console.log() statements to your code, if you haven’t already, to let you know whether the various steps are working (e.g. log any variables that you create, and log helpful messages to check that any if-statements and loops are working correctly)

• Don’t forget a console.log('executing scripts.js'); message at the top of your JS file to make sure that it is running

Step 3: Check your code on JSHint.com

• This tool will help you to find more syntax errors, as well as potential bugs such as implicit type conversion, leaking variables and various unsafe coding practices

Step 4: Start from the top

• Comment out all of your code using multi-line comment tags: /* */

• Move the opening comment tag downwards to un-comment a small section of code at the top, then check whether this code runs correctly in the browser (adding console.log() statements to test things if needed)

• If the first small section of code works, un-comment the next small section to test it in the same way

• Eventually, you will discover the section(s) of your code that are causing the problem - here, triple-check your syntax and use extra console.log() statements to examine every single piece of code

Step 5: Emergency procedures

If you still haven’t found any explanation for your code not working, you may want to consider creating a new scripts file (e.g. scripts2.js) to recreate certain sections of your code - it’s rare, but sometimes there can be a bug in the brower or text editor.

And if you’re still stuck after this, you might want to head over to StackOverflow’s JavaScript section and browse or search for solutions.