eval('document.' + someElementInAVariable + '.someproperty = whatever');
If you need to access a property or object, in which the name of that property or object is stored in a variable, you can use the bracket([]) notation.
document[somElementInAVariable].someproperty = whatever;
var x = '1';
var y = 1;
alert(x + y); //expecting 2? think again! you'll get 11.
Even worse, what if you were testing for a boolean true/false value?
var foo = false;
if(foo == 0)
alert('Foo is false!');
}
Here, 1 and 0 will evaluate to true/false respectively. Is this really what you wanted? Maybe yes; maybe no.
var xNumber = parseInt(x, 10);
In our second example, we can use the '===' comparison operator, which does not do type coercion:
var foo = false;
if(foo === 0)
alert('Foo is false!');
}
function foo()
{
// code goes here
}
However, I noticed that sometimes my code was not working as intended, and some of my functions were not returning the results I expected:
function SeaCritter()
{
return
{
firstName: 'Spongebob',
lastName: 'SquarePants'
};
}
var sc = SeaCritter();
alert('Hello, my name is ' + sc.firstName + ' ' + sc.lastName);
This code will throw an error in most(if not all) browsers. The reason for this is how the interpreter handles some statements(like return) and the brace that is placed behind them.
function SeaCritter() {
return {
firstName: 'Spongebob',
lastName: 'SquarePants'
};
}
var sc = SeaCritter();
alert('Hello, my name is ' + sc.firstName + ' ' + sc.lastName);
function registerOnClick() {
for(var x = 0; x < 5; ++x) {
document.getElementById(x).onclick = function() {
alert(x);
}
}
}
window.onload = registerOnClick;
You might expect that your elements with ID 0-4 would each alert 0 - 4 depending on which button was pressed. However, you'd be wrong. All of the buttons will alert 5! What happened? The issue here is the way closures work. When you use a variable in a closure that is declared in another scope, the closure forms a link with that variable, and will hold on to that value even after the variable has gone out of scope. Since javascript uses function scope variables, at the end of the function, x was equal to 5, so the closure remembers that.
function registerOnClick() {
for(var x = 0; x < 5; ++x) {
document.getElementById(x).onclick = function(v) {
return function() {
alert(v);
}
}(x);
}
}
window.onload = registerOnClick;
This creates an anonymous function and passes our variable to it. This anonymous function is immediately executed and returns the function that we want to run on our onclick event. This creates a new scope for our variable, preserving the value we want to pass to our onclick event.
setTimeout("doThis()", 1000);
setTimeout(doThis, 1000);
setTimeout(function() {
doThis();
}, 1000);
setTimeout(function() {
doThis('stuff', 'i', 'am', 'passing');
}, 1000);
<script language="Javascript">...</script>
<script type="text/javascript">...</script>
for(var i = 0; i < someObject.length; i++) {
// doing all sorts of stuff
}
for(var i = 0; i < someObject.length; i++) {
//doing all sorts of stuff here and for some known or unknown reason, the length property of our object has changed
}
for(var i = 0, e = someObject.length; i < e; i++) {
//doing all sorts of stuff here and if our length property changes, the number of times our loop will run should not.
}
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)