addEvent Listener inner function not passing the correct variable index

KevinJohnson

09-06-2011, 05:18 AM

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

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

<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

nomanic

09-06-2011, 05:23 AM

hi

try this-

<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>

KevinJohnson

09-06-2011, 05:31 AM

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

:)

devnull69

09-06-2011, 08:59 AM

This should work also for button 10

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.