Home/ Questions/Q 9211845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:23:22+00:00

I’m having trouble putting an array’s value into the function call of an added

  • 0

I’m having trouble putting an array’s value into the function call of an added event on a dynamically created element.

So here’s the hard-coded version that works just fine:

var parent_item = document.getElementById("developers_container");

var part = document.createElement('div');
part.id = "developer_A";
part.name = "developer_A";
part.className = "developer_block_un";
part.onmouseover = function() { hilight_dev('A',true)};
part.onmouseout = function() { hilight_dev('A',false)};
parent_item.appendChild(part);

var parent_item = document.getElementById("developer_A");

var part = document.createElement('span');
part.id = "developer_title_A";
part.name = "developer_title_A";
part.className = "developer_un";
part.innerHTML = "John Doe";
part.onclick = function() { select_dev('A')};
parent_item.appendChild(part);

Basically what this does is create a listing of users for selecting. Each user’s listing has mouseover, mouseoff and onclick events. The meat of the above code is currently being duplicated for every user.

I want to replace the duplication with an array-based function:

var dev_id = new Array();
var dev_fn = new Array();
var dev_ln = new Array();

document.getElementById("developers_container").innerHTML = "";

dev_id[0] = "A";
dev_fn[0] = "John";
dev_ln[0] = "Doe";

dev_id[1] = "B";
dev_fn[1] = "John";
dev_ln[1] = "Smith";

dev_id[2] = "C";
dev_fn[2] = "John";
dev_ln[2] = "Jones";

dev_id[3] = "D";
dev_fn[3] = "John";
dev_ln[3] = "Yougetthepoint";

document.getElementById("developers_container").innerHTML = "";

for(var i = 0; i < dev_id.length; i++) 
{
    var parent_item = document.getElementById("developers_container");

    var part = document.createElement('div');
    part.id = "developer_"+dev_id[i];
    part.name = "developer_"+dev_id[i];
    part.className = "developer_block_un";
    part.onmouseover = function() { hilight_dev(dev_id[i],true)};
    part.onmouseout = function() { hilight_dev(dev_id[i],false)};
    parent_item.appendChild(part);

    var parent_item = document.getElementById("developer_"+dev_id[i]);

    var part = document.createElement('span');
    part.id = "developer_title_"+dev_id[i];
    part.name = "developer_title_"+dev_id[i];
    part.className = "developer_un";
    part.innerHTML = dev_fn[i]+"<BR>"+dev_ln[i];
    part.onclick = function() { select_dev(dev_id[i])};
    parent_item.appendChild(part);
}

Every bit of that is working just fine, save for the added events. Where “dev_id[i]” is being used within the function code (as in “part.onmouseover = function() { hilight_dev(dev_id[i],true)};”), it doesn’t seem to be doing anything. The event fires off and the function is called, but the variable that’s being passed is coming through as “undefined” instead of that user’s id like it should be.

I’m hoping someone here knows how to get this to work. Googling was not very helpful, and this is one of those silly little issues that’s cost me half a day trying to figure out. Any and all help is greatly appreciated.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    
part.onmouseover = function(i) { 
  return function() { hilight_dev(dev_id[i],true) }
}(i)

    The variable i that you have in the loop is undefined at the time the function is invoked, you need to form a closure over it in order to keep it’s value. Please refer to “JavaScript, the Good Parts” by Douglas Crockford for a detailed explanation on this

    Err.. after Neil’s comment.. yes.. i is not undefined.. it will always be the length of dev_id.. in any case, it’s not what the op wants 🙂

    • 0