Most common JavaScript mistakes and their solutions

JavaScript has come a long way from being used just as Client Side Form Validator to becoming the backbone of Web 2.0 rich web applications. In the current scenario, every web developer have to learn JavaScript as there is hardly any Web 2.0 application which does not implement JavaScript.

In my opinion followings are the most common errors/mistakes made during JavaScript implementation.

Calling JavaScript Code without any event:This is the first error any JavaScript developer is bound to make. Allow me to illustrate it with a real life example. Suppose, we need to alert the content inside a div with id “content”. The novice developer would write:
1. <html>
2. <head>
3. <title>Invalid JavaScript Code</title>
4. <script type="text/javascript" language="javascript">
5. var content=document.getElementById(‘content’).innerHTML;
6. alert(content);
7. </script>
8. </head>
9. <body>
10. <div id="content">This is the sample content</div>
11. </body>
12. </html>
Needless to say, the above code will throw an error. The technical explanation of the error is as follows. As JavaScript is an interpreted scripting language, it would try to read the content on the line 6. However, at that moment, the HTML had not been rendered and hence JavaScript will find no div. Its solution is very simple and elementary. All you have to do is to call this code on some event, like onload , onclick etc. Following is the correct way to do it:
1. <html>
2. <head>
3. <title>Valid JavaScript Code</title>
4. <script type="text/javascript" language="javascript">
5. function init(){
6. var content=document.getElementById(‘content’).innerHTML;
7. alert(content);
8. }
9. </script>
10. </head>
11. <body onload="init()">
12. <div id="content">This is the sample content</div>
13. </body>
14. </html>
Reading string as array:Well, once I committed this mistake and spent over 2 days to find this issue from 102 lines of JavaScript. Suppose you need to read and display the 3rd character of a string. any C or PHP developer is bound to write the code like this:
1. <html>
2. <head>
3. <title>Invalid JavaScript Code</title>
4. <script type="text/javascript" language="javascript">
5. function readString(){
6. var str="JavaScript";
7. alert(str[2]);
8. }
9. </script>
10. </head>
11. <body>
12. <input type="button" onclick="readString();" />
13. </body>
14. </html>
Quite interestingly, the above code if alert “v” in Firefox or Mozilla. On few Internet Explorers it will throw an error. The reason is that reading string as an array (str[2]) is not an cross browser compatible. The correct way code is as follows:
1. <html>
2. <head>
3. <title>Valid JavaScript Code</title>
4. <script type="text/javascript" language="javascript">
5. function readString(){
6. var str="JavaScript";
7. alert(str.charAt(2));
8. }
9. </script>
10. </head>
11. <body>
12. <input type="button" onclick="readString();" />
13. </body>
14. </html>
Validating for an blank field in JavaScript:This is one of the most common bug your quality analyst or client would let you know. When you are validating a blank field (say username). Most of the JavaScript developers would write the following code to validate it:
1. <html>
2. <head>
3. <title>Valid JavaScript Code</title>
4. <script type="text/javascript" language="javascript">
5. function validate(){
6. var value=document.getElementById(‘uname’).value;
7. if(value.length<1) {
8. alert("ERROR: Username cannot be left blank");
9. return false;
10. }
11. }
12. </script>
13. </head>
14. <body onload="init()">
15. Username: <input type="text" id="uname">
16. <input type="button" onclick="validate()" />
17. </body>
18. </html>

Although the above code may seems to work, but it fails as soon as you enter any invisible character like space, newline/enter or a tab. The check is that the length of the string entered should not be less than 1 (in this case). What the developer has failed to negotiate that three invisible characters like spaces would count 3 but would be invalid. The solution is simple. Trim (similar to one in PHP) the value before applying this check. Unfortunately, there is no inbuilt function to trim a string. However you can use it from my free library rochak.js as used in the following example.

<html>
<head>
<title>Valid JavaScript Code</title>
<script type="text/javascript" language="javascript" src="http://rochakchauhan.com/rochak.js"></script>
<script type="text/javascript" language="javascript">
function validate(){
var value=document.getElementById(‘uname’).value;
value=rochak.trim(value);
if(value.length<1) {
alert("ERROR: Username cannot be left blank");
return false;
}
}
</script>
</head>
<body onload="init()">
Username: <input type="text" id="uname">
<input type="button" onclick="validate()" />
</body>
</html>

If you liked my post, feel free to subscribe to my rss feeds

2 Comments so far (Add 1 more)

Oh… My bad..
I guess to error is human

1. rochakchauhan on September 25th, 2008 at 7:34 PM
Hello,

I think that there is a small mistake in 3rd example in 6th line:

var value=document.getElementById(‘uanme’).value;
_______________________________^^^^^______

2. Mis on September 25th, 2008 at 7:18 PM