Skip to main content
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Emily Christiansen and Simon Free and Dave Ferguson and Joel Hill and Dan Wilson and Jeff McDowell and Brian Rinaldi
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Emily Christiansen@egchristiansen ) , Simon Free@simonfree ) , Dave Ferguson@dfgrumpy ) , Joel Hill@Jiggidyuo ) , Dan Wilson@DanWilson ) , Jeff McDowell@jeff_s_mcdowell ) , and Brian Rinaldi@remotesynth )

Dereferencing Javascript Variables - Revisiting

By on

As posted before I was having a very hard time getting dynamic onclick methods to call what I thought was a dereferenced variable. I was getting a lot of help and great suggestions on the CFTalk list, but one guy finally posted a link to:

This page discussed exactly the problem I was having, the reasons I was having it, and the solution. It's all about scoping of variables. The variable that I was alerting (in the dynamic onclick) was for the method (including every iteration of the FOR loop) and therefore each link pointed to it. In the solution below, the FOR loop is replaced with a repetative method call forces each variable scopes to be local.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Javascript Dynamic Variables</title>
<script type="text/javascript">

function TestClass( strName ){
this.Name = strName;

TestClass.prototype.AlertValue = function( anyValue ){
alert( this.Name + " is alerting: " + anyValue );

function Init(){
var objContentDiv = document.getElementById( "content" );
var objA = null;
var objTest = new TestClass( "Tester" );

// This runs the for loop using a LOCAL scope for each iteration.
(function loop( intI ){
var intX = intI;

if (intI < 10){

// Create new A element.
objA = document.createElement( "a" );

// Set A display properties. = "block"; = "#F8F8F8"; = "1px solid #333333"; = "10px 10px 10px 10px"; = "#333333"; = "15px";

// Create text for the link.
objA.appendChild( document.createTextNode( "I should alert " + intX + " when clicked" ) );

// Set the href.
objA.setAttribute( "href", "##" );

// Set the onclick method.
objA.onclick = function(){ objTest.AlertValue( intX ) };

// Attach the A to the content.
objContentDiv.appendChild( objA );

loop(intI + 1);



// Is the tester class available here (just testing).
alert( "objTest is of type: " + typeof(objTest));

<body onload="Init();">

<div id="content"></div>


Reader Comments


Hey thanks for this I'd be struggling with a similar problem all morning. JavaScript really is an ugly language, this solution seems a little strange but at least it works!



I would recommend looking into jQuery. It is an awesome Javascript framework that I have just started working with. One of the things it provides is an Each() method (this is common to many Javascript frameworks). But anyway, because the Each() method takes a function literal, it forces you to create a new local scope for each loop iteration. This, in and of itself, helps take care of many of the "referencing" issues.