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
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post

    addEvent Listener inner function not passing the correct variable index

    This code is finally working, but for some reason no matter which button i click on, it is always returning "9". It should be firing the alert(x), where x is the x index value for that particular addEventListener

    Code:
    .addEventListener('click', function (e) {alert(x);},

    Code:
    <html>
    
    <script type="text/javascript">
    
    document.addEventListener('DOMContentLoaded', DOMLoadedEventFunction, false);
    
    function DOMLoadedEventFunction ()
    {
    for(var x = 0; x < 9; x++)
       {
        document.getElementById('btn' + x).addEventListener('click', function (e) {alert(x);}, false);
       }
    }
    
    
    </script>
    
    
    <body>
    
    <input type="button" id="btn0" value="1">
    <input type="button" id="btn1" value="2">
    <input type="button" id="btn2" value="3">
    <input type="button" id="btn3" value="4">
    <input type="button" id="btn4" value="5">
    <input type="button" id="btn5" value="6">
    <input type="button" id="btn6" value="7">
    <input type="button" id="btn7" value="8">
    <input type="button" id="btn8" value="9">
    <input type="button" id="btn9" value="10">
    
    
    
    </body>
    </html>

    This is just some sample code that i will later turn into an HTML5 File Manager

  • #2
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    hi

    try this-

    Code:
    <html>
    
    <script type="text/javascript">
    
    document.addEventListener('DOMContentLoaded', DOMLoadedEventFunction, false);
    
    function DOMLoadedEventFunction ()
    {
    for(var x = 0; x < 9; x++)
       {
        obj=document.getElementById('btn' + x);
        obj.x=x;
        obj.addEventListener('click', function (e) {alert(this.x);}, false);
       }
    }
    
    
    </script>
    
    
    <body>
    
    <input type="button" id="btn0" value="1">
    <input type="button" id="btn1" value="2">
    <input type="button" id="btn2" value="3">
    <input type="button" id="btn3" value="4">
    <input type="button" id="btn4" value="5">
    <input type="button" id="btn5" value="6">
    <input type="button" id="btn6" value="7">
    <input type="button" id="btn7" value="8">
    <input type="button" id="btn8" value="9">
    <input type="button" id="btn9" value="10">
    
    
    
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    thanks for the code. it works, except for the last button (number 10)...could you explain that code a little bit?


  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This should work also for button 10
    Code:
    document.addEventListener('DOMContentLoaded', DOMLoadedEventFunction, false);
    
    function DOMLoadedEventFunction ()
    {
    for(var x = 0; x < 10; x++)
       {
        obj=document.getElementById('btn' + x);
        obj.x=x;
        obj.addEventListener('click', function (e) {alert(this.x);}, false);
       }
    }
    With the "inner function" of the event listener you create a closure. That means that the inner function knows about all the data of the surrounding scope even if this scope has already finished executing. So when you actually click one of the buttons, the loop to attach the event listeners in the first place has already finished running and the variable x ended up to be "9". So this is the value of x which will be visible inside the click handler when it's actually called. To prevent this you will need to create a copy of the current x during the creation of the event handler. nomanic did that by appending the value of x to a property of the button.


  •  

    Posting Permissions

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