...

View Full Version : Dom onclick variable value



Mr J
07-24-2006, 10:17 PM
I am trying to apply the current value of variable i to the links onclick event
I've even tried assigning it to variable j but the only values I get when any link is clicked is

i = 5
j = 4

The "page"+i and "Link"+i show as they should with variable i showing the correct value.

Any help to cure my pain would be welcome



<script type="text/javascript">
<!--

onload=function createLink(){

for(var i=0; i<5; i++) {

newLink=document.createElement("A")
newLink.setAttribute("href","page"+i+".htm")
newLinkText=document.createTextNode("Link "+i)

var j = i

newLink.onclick=function(){
document.getElementById("test2").innerHTML=this.href+" i = "+i+" j = "+j
return false
}

brk=document.createElement("BR")

newLink.appendChild(newLinkText)
document.getElementById("test").appendChild(newLink)
document.getElementById("test").appendChild(brk)

}

}

// -->
</script>


<div id="test"></div>

<BR><BR>

<div id="test2"></div>

Mr J
07-24-2006, 10:30 PM
Figured out one way but is this the way to do it?


<script type="text/javascript">
<!--

onload=function tryMe(){

for(var q=0; q<5; q++) {
createLink(q)
}

}


function createLink(i){

newLink=document.createElement("A")
newLink.setAttribute("href","page"+i+".htm")
newLinkText=document.createTextNode("Link "+i)

newLink.onclick=function(){
document.getElementById("test2").innerHTML=this.href+" i = "+i
return false
}

brk=document.createElement("BR")

newLink.appendChild(newLinkText)
document.getElementById("test").appendChild(newLink)
document.getElementById("test").appendChild(brk)


}

// -->
</script>

<div id="test"></div>

<BR><BR>

<div id="test2"></div>

Kor
07-25-2006, 09:37 AM
a quite elegant solution is to create an object (in fact a variable) attached to the element and use it inside the closure:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload = function(){
var root=document.getElementById('test');
var root2=document.getElementById('test2');
for(var i=0;i<5;i++){
var a = document.createElement('a');
a.setAttribute('href','page'+i+'.html');
a.appendChild(document.createTextNode('Link '+i));
a.ind=i;//here's the attached new created variable...
a.onclick=function(){
root2.firstChild.data=this.href+ ' i = '+this.ind;//...and here is where you use it
return false // to prevent opening the page
}
root.appendChild(a)
root.appendChild(document.createElement('br'))
}
}
</script>
</head>
<body>
<div id="test"></div>
<br>
<br>
<div id="test2">&nbsp;</div>
</body>
</html>

Kor
07-25-2006, 09:49 AM
...otherwise the i will be always the last one, as the loop has already finished (and i has the last value) the moment you trigger the function on the event.

Mr J
07-25-2006, 02:05 PM
Thanks Kor, as you say it is a more elegant way.

I thought, as per my first post, that if I used "var j" and assigned it the value of i that j would be taken as a new local variable on each run of the loop.

Once again thanks

Kor
07-25-2006, 02:49 PM
Thinking a little bit more, I reckon that ind is not an object nor a variable, it is in fact a new created property of the tag object <a>

a.ind
can be write also in JSON as
a['ind']



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum