how to implement onlick event on a node?

[Cylix]

my function:
function displayFiles(files, curPath) {
var d = document.getElementById('folderContent');
d.innerHTML = '';
if (!(d&&files)) return;
var aryFiles = files.split('|');
var node, txtNode, imgNode, ext;
for (var i=0;i<aryFiles.length;i++) {
node = document.createElement('div');
node.className='file';
node.id=aryFiles[i];
node.onclick=alert(aryFiles[i]);
imgNode=getFileTypeNode(getFileExt(aryFiles[i]));
txtNode=document.createTextNode(aryFiles[i])
node.appendChild(imgNode);
node.appendChild(txtNode);
d.appendChild(node);
}
}

when the function run, the onlick event, ie alert(aryFiles[i]); is
fired.
but the event is never set. please let me know the right syntax.
Thanks a lot!

[Ian Collins]

Cylix wrote:

my function:
function displayFiles(files, curPath) {
var d = document.getElementById('folderContent');
d.innerHTML = '';
if (!(d&&files)) return;
var aryFiles = files.split('|');
var node, txtNode, imgNode, ext;
for (var i=0;i<aryFiles.length;i++) {
node = document.createElement('div');
node.className='file';
node.id=aryFiles[i];
node.onclick=alert(aryFiles[i]);

node.onclick=function(){ alert(aryFiles[i]); }

You were calling alert.

--
Ian Collins.

[Moses]

Hi Collins,

I have problem in the following code,

node.onclick=function(){ test(i);};

for (var i=0;i<5;i++)
{
bdy = document.getElementById('name');
node = document.createElement('div');
node.id=i;
node.onclick=function(){ test(i);};
newtext = document.createTextNode(i);
node.appendChild(newtext);
bdy.appendChild(node);
}
ie I am creating 5 divs and on the click event of the div I am
calling a function test(i),If I click the first div it should alert 1
and if I click the second it should alert 2 and so on....

The problem is all the divs alert 5, Only the last value of i is
alerted.


Thanks&Regards
Moses

On Apr 3, 7:02 am, Ian Collins <[e-mail]:

Cylix wrote:

my function:
function displayFiles(files, curPath) {
var d = document.getElementById('folderContent');
d.innerHTML = '';
if (!(d&&files)) return;
var aryFiles = files.split('|');
var node, txtNode, imgNode, ext;
for (var i=0;i<aryFiles.length;i++) {
node = document.createElement('div');
node.className='file';
node.id=aryFiles[i];
node.onclick=alert(aryFiles[i]);

node.onclick=function(){ alert(aryFiles[i]); }

You were calling alert.

--
Ian Collins.

[Ian Collins]

Moses wrote:

Hi Collins,

Please don't top post and my name's Ian!

I have problem in the following code,

node.onclick=function(){ test(i);};

for (var i=0;i<5;i++)
{
bdy = document.getElementById('name');
node = document.createElement('div');
node.id=i;
node.onclick=function(){ test(i);};
newtext = document.createTextNode(i);
node.appendChild(newtext);
bdy.appendChild(node);
}
ie I am creating 5 divs and on the click event of the div I am
calling a function test(i),If I click the first div it should alert 1
and if I click the second it should alert 2 and so on....

The problem is all the divs alert 5, Only the last value of i is
alerted.

That's because i is in the scope of displayFiles and the last value
assigned to it was 5. Don't use i, use the id of the element that was
clicked.

--
Ian Collins.