You might already have experienced your JavaScript not working but you hopefully puzzled out the problem and fixed it.  If not this page might teach you what you need to fix those errors.

Most browsers come with a tool to help you to find JavaScript and other errors.  Each browser will be different but start by viewing jsvariable.html in your browser as normal.  Now press F12.  If part of the browser window now displays new stuff you have done what is needed.  If not then explore your browser menu system looking for Web developer tools or Console.

You should now see something like this although the arrangement and some words will be different in different browsers:

Microsoft Edge error console

Make sure the Console is active (probably by clicking on the tab).  The console will show any errors and some other stuff.  For now we just want JavaScript errors and there should not be any but if you see others you could fix those errors before continuing!  You should have at least one although not all browsers will say so (delete the link element to fix it as default.css does not exist).  You should ignore or disable any warnings and information messages as all you need are the errors.

Open jsvariable.html in your editor.  Change the name of the variable on the first line to myMessage.  Save the file and go back to the browser.  Refresh the page and try clicking.  You should see an error appear in the console.  It may say something about an undefined variable:

The error in our code showing in Microsoft Internet Explorer

The wording of the error may not always be easy to understand (and this screen shot is probably the least clear of all the browsers).  The line number is the thing to look for so you at least know where the error is (maybe).  In the screen shot it is line 16 - look for the orange arrows.  For this error the number should be the line after the one you just changed.  The error is caused by you creating one variable and then trying to use another one which does not exist.  Read the error message (here it is john is undefined which is true).  It will say what is wrong but maybe not that clearly (some browsers are good at errors but others are not so try them all and pick one).

To fix the error you can do one of two things:

  1. change that second one to the same as the first one (do this and save and refresh)
  2. change the first one back to being the same as the second one

Which line?

One thing to note is that the error message pointed to the error being on one line but the actual mistake could have been before that.  So if you cannot see the error on the line the browser tells you is wrong start looking a line or two before.  If there is nothing there try tracing variable and function names and make sure they are spelled correctly.

Illustrate this by deleting the second brace (curly bracket) which marks the end of the function.  Save and refresh and click ont he red word.  In Microsoft Edge and Google Chrome it probably identifies the line after the actual missing brace.  In Mozilla Firefox it may be the line before.  In Internet Explorer it points to where the function is called:

Where the error is in Internet Explorer

None of those three currently states the actual line but all see the problem and are trying to find it for you.  The function does not exist (is undefined) because it is not complete.  Put the curly bracket (brace) back in.

You might think this is not very helpful but if you practise you will soon find it essential.