Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts

    Dom onclick variable value

    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


    PHP Code:
    <script type="text/javascript">
    <!--

    onload=function createLink(){

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

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

    var 
    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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Figured out one way but is this the way to do it?

    PHP Code:
    <script type="text/javascript">
    <!--

    onload=function tryMe(){

    for(var 
    q=0q<5q++) {
    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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    a quite elegant solution is to create an object (in fact a variable) attached to the element and use it inside the closure:

    PHP Code:
    <!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 
    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
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ...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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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']
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •