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.
If there’s an error in your browser console or on JSHint.com, copy and paste the error into Google or StackOverflow’s search box to see who else has struggled with it before and how they fixed it.