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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Event handling with changing variable?

    Hi all!
    I have a small but important problem with event handling.
    I tried googling but I found nothing.
    This is the simplified version of the problem:

    Code:
    container=document.createElement("div")
    for (x=1; x<=10; x++)
      {
      div=document.createElement("div")
      div.onmouseover=function (){alert(x)}
      container.appendChild(div)
      }
    The problem is that it will alert 10 for all the divs in the container.
    What I want is that the first div alerts 1 on mouseover, the second alerts 2... the tenth alerts 10.

    I already figured out that it can be solved like:

    Code:
    container=document.createElement("div")
    for (x=1; x<=10; x++)
      {
      div=document.createElement("div")
      div.setAttribute("onmouseover","alert("+x+")")
      container.appendChild(div)
      }
    container.innerHTML=container.innerHTML
    But this method is slower, more complicated and harder to read, and uses the primitive event-listener attaching.
    I am curious how the same can be done with the first method.

    I hope it was understandable.

    I'd be grateful if you could help.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    container=document.createElement("div")
    for (x=1; x<=10; x++)
      {
      div=document.createElement("div")
      div.xnu=x;
     div.onmouseover=function (){alert(this.xnu)}
      container.appendChild(div)
      }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great! Many thanks!

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Another wat to acheive this without using expando properties is:

    Code:
    container = document.createElement("div")
    
    for (x=1; x<=10; ++x)
    {
      div = document.createElement("div")
      div.onmouseover=function (){ var y = x; alert(y);}
      container.appendChild(div);
    }
    The problem was that you were referencing x as if it were a local variable to your anonymous function, but really x was declared outside the scope of the function. By using the var keyword to create a new variable in the scope of the anonymous function, the function becomes bound up with the value of x at the time of function declaration. This is called a closure.


  •  

    Posting Permissions

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