Problem with concatenating a variable.

Hi guys, I have a small script that creates elements with createElement(); and assigns an id to it with a variable concatenated to the id, but when the function is ran again it seems like the previous div that was generated doesn't retain the previous id with the concatenated variable.

This is my code:


<script>
function effect(){
$('#btn-slide' + defectsnumber).click(function() {
$('#table2' + defectsnumber).animate({
height: 'toggle'
}, 2000);
});
}
</script>

<script type='text/javascript' language='JavaScript'>

defectsnumber = 0;

function generatedefects()
{
if (defectsnumber > 9) {
alert('You can not enter more than 10 defect percentages!');
} else {

if (defectsnumber == 0)
{
testdiv2 = document.createElement('div');
testdiv2.id = 'testdiv';
}
defectsnumber = defectsnumber + 1;


testingdiv = document.createElement('div');
testingdiv.id='btn-slide' + defectsnumber;
testingdiv.innerText = 'Click Me ' + defectsnumber;


divTag2 = document.createElement('div');
divTag2.id='table2' + defectsnumber;
divTag2.style.cssText = 'background: white; border: 1px solid black; width: 300px; height: 300px; margin-left: 34px; margin-top: 5px; float: left; display: yes;';
divTag2.appendChild(testingdiv);

testdiv2.appendChild(divTag2);
document.body.appendChild(testdiv2);

}
effect();
}
</script>

Does anyone know why that is happening?

This is a closure problem. With the click handler in the effects functions you are creating a closure. The click handler will have access to the surrounding scope even if that scope has finished executing.

In your case you are trying to access "defectsnumber". But defectsnumber increases with every new DIV. So if you click one of the earlier DIVs, defectsnumber will reference the newest DIV and it will fade out.

Solution: Create a local variable to effects(). The closure will keep its value bound to the correct DIV

function effect(){
var closureHelp = defectsnumber;
$('#btn-slide' + closureHelp).click(function() {
$('#table2' + closureHelp).animate({
height: 'toggle'
}, 2000);
});
}


defectsnumber = 0;

function generatedefects() {
if (defectsnumber > 9) {
alert('You can not enter more than 10 defect percentages!');
} else {
if (defectsnumber === 0) {
testdiv2 = document.createElement('div');
testdiv2.id = 'testdiv';
}
defectsnumber = defectsnumber + 1;

testingdiv = document.createElement('div');
testingdiv.id='btn-slide' + defectsnumber;
testingdiv.innerHTML = 'Click Me ' + defectsnumber;

divTag2 = document.createElement('div');
divTag2.id='table2' + defectsnumber;
divTag2.style.cssText = 'background: white; border: 1px solid black; width: 300px; height: 300px; margin-left: 34px; margin-top: 5px; float: left; display: yes;';
divTag2.appendChild(testingdiv);

testdiv2.appendChild(divTag2);
document.body.appendChild(testdiv2);

}
effect();
}