Web Analytics Made Easy - StatCounter addEvent Listener inner function not passing the correct variable index - CodingForum

Announcement

Collapse
No announcement yet.

addEvent Listener inner function not passing the correct variable index

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #2
    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>
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/

    Comment

    • #3
      thanks for the code. it works, except for the last button (number 10)...could you explain that code a little bit?

      Comment

      • #4
        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.

        Comment

        Previous template Next
        Working...
        X
        😀
        🥰
        🤢
        😎
        😡
        👍
        👎