JavaScript Beginners - Common Mistakes

Those just starting out with Javascript often make the same mistakes in their code. Some of these mistakes are so common that it is a rare beginner who doesn't make them. In many cases these mistakes are not the fault of the beginner but are the fault of whoever is teaching them JavaScript. There are many really antiquated sources for learning JavaScript on the web which tell you how JavaScript used to need to be written back in the days of Netscape 4 and earlier browsers. There are also many people teaching JavaScript as if Netscape 4 were the latest browser simply because they haven't realised that JavaScript has completely changed since then.



Unless you consider yourself to be somewhere between advanced and expert with your JavaScript programming skills you will never need to use this command. The situations where this command is still the appropriate one to use is now so rare that beginners and even intermediate JavaScript programmers will never come across a situation where this command is appropriate.

document.getElementById('myid').innerHTML = 'something';

This is the command that JavaScript beginners should be using instead. In the spot in the page where they were going to include the document.write they should instead place an HTML tag with an id (id="myid" in the example) and then use the innerHTML call at the bottom of the page instead. This both helps to keep the JavaScript separate from the HTML (which makes reusing the script easier) and also means that you can update the content without having to reload the page.



This command was re-purposed for debugging use only a long time ago (which is why some browsers include extra checkboxes for disabling future alerts or even JavaScript). Its earlier use for displaying messages was replced by the same innerHTML statement that replaced document.write a long time ago.


Where alert was being used for debugging you can now use the console.log command that all modern browsers support. This writes the message to the browser's console instead of displaying in front of the web page. This means that there is not such an issue if you accidentally forget to remove one of these debugging calls when your page goes live as unless your visitor has their browser console open they will not see the message.

Similarly confirm() and prompt() should not be used. The situations where they were required for debugging can now be handled by setting break points in the debugger built into all modern browsers.


num = parseInt(str);

The parseInt command is for converting between number bases. Correct use of the command would have a value between 2 and 9 or 11 and 36 as the second parameter. Where the second parameter is 10 or missing then this is the wrong command to use.

num = Number(str);

Where the intention is to convert a string to a number then the correct command for doing the conversion is Number.

dim = /^(\d+)(\D*)$/.exec(cssprop);

One alternate misuse of parseInt is for extracting the numeric portion of a CSS attribute. A better alternative for that purpose is to use this regular expression which extracts both parts of the attribute into dim[1] and dim[2] respectively. You can then convert the dim[1] part to a number if required while still having access to the following characters. So for example if cssprop contained '30em' then dim[1] would be '30' and dim[2] would be 'em'.


Many beginners mistakenly attach their JavaScript in the head of the page. This both slows the loading of the page by loading the JavaScript before loading the parts of the content that actually display something and it makes the processing more complicated as almost all JavaScript requires that the HTML at least be loaded before the script runs. Almost all scripts can run from the bottom of the page just before the </body> tag and when placed there you can almost certainly run the code straight away without needing to use onload.

The only exceptions where the script must go in the head that I know of are the following two one line scripts (and any more complex variants of these two scripts).

if (top.location !== self.location) top.location = self.location;
document.getElementsByTagName('html')[0].className += ' js';

The first of these is a framebreaker script that reloads the page outside of any frames that someone may try to load the page in. The second of these is the replacement for the <noscript> tag where a class is added to the page when JavaScript is enabled that allows you to completely restyle the page content depending on whether or not JavaScript is enabled (in this instance the script needs to run before the stylesheet is loaded).

The only instance in an HTML page where onload is still required when the script is at the bottom of the page is where you want processing to run if files the page uses fail to load.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow