Common JavaScript Mistakes
- Multiline Strings
- New lines and semicolons can both be used to separate statements, so to make multiline strings you will need to use concatenation. "+" is the concatenation operator and the addition operator.
- The "+" Operator
- In JavaScript '+' is the operator for concatenation as well as the operator for addition.
setTimeout()
- When you call
setTimeout()
from a function you need to remember that it excecutes from a global scope, not the function's scope, therefore, all variables passed to functions that it calls need to be global variables. - The
=
and==
Operators =
is an assignment operator;==
is an operator to compare if two values are equal.<script [...] src="example.js">
- When a
<script>
element has the src attribute set it ignores everything between the start and end tags. javascript:
pseudo-protocol- The
javascript:
pseudo-protocol should not be used in event handlers likeonclick
. It should only be used in attributes that contain a URL, for example in thehref
attribute of<a>
elements and theaction
attribute of<form>
elements. You can also use it to make bookmarlets. - Variables, Strings, Dot Notation, & Array Notation
- When you use dot syntax, like in
document.formName.formControlName
formName
andformControlName
must be unquoted string literals, not variables. To use a string variable you can use array notation likedocument[formName][formControlName]
, whereformName
andformControlName
are string variables. To use an object variable you can do something like this:form.formControlName.value
, where form is an object reference that refers to aelement and
formControlName
is an unquoted string literal. - dot syntax does not resolve variables; you must use collection/array syntax.
For example,
var el='ta1'; document.form1.el.value;
will not work because there is no element named 'el'. On the other hand,var el='ta1'; document.forms.form1.elements[el].value;
will work because it is clear to the parser that 'el' is a variable. document.getElementById()
document.getElementById()
gets elements by their ID, not by their NAME. If you want to get an element by its NAME, then usedocument.getElementsByName()[num]
, where "num" is the index number. If there is only one element with that name, then use "0" (zero) for "num".document.write()
- When
document.write()
is called after the page has finished loading, it overwrites the content of the page. (More information.) parseInt()
andparseFloat()
- When the first argument to
parseInt()
orparseFloat()
is an empty string or does not start with a number it returns NaN. One solution to this problem is to use the Number() function instead. parseInt()
's Second Argument- If you don't specify
parseInt()
's second argument, then the function will look at the string being passed to it to determine what base to use. If the numerical string starts with "0x" then it will be interpretted as hex (hexadecimal). If the numerical string starts with "0", then it will be interpretted as octal. So to be safe, I recommend you specify 10 as the second argument so that the returned number will always be decimal. For example,parseInt("010",10)
will return 10, butparseInt("010")
will return 8. <input type="button" name="submit">
- Naming a form control element "submit" causes the
submit()
method of the <form> element to no longer work. Simply rename the offending form control to fix this. - Form Validation Event
- To validate a form when it's submitted by typing enter in a form with a
real submit button or clicking that real submit button, you should use
<form ... onsubmit="return validate();">
instead of on the real submit button which would look something like<input type="submit" name="Submit" value="Submit" onclick="return validate();" />
or<button type="submit" onclick="return validate();" >Submit</button>
. The function should return true of false, depending on whether the form submission should be stopped or allowed to continue. When you are using a simulated submit button, it's all right to use the onclick event, because clicking it won't trigger the onsubmit event of the form. This is because triggering a JavaScript form validator script from onclick of a submit button will not work correctly in some browsers. - <formObjectReference>.submit()
- <formObjectReference>.submit() doesn't trigger the onsubmit event.
document.location
document.location
is deprecated; uselocation.href
instead.window.open()
- The strings passed as the second and third paramaters to
window.open()
should not contain any white-space characters.
Related Links:
Last update: 2006-11-09