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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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:

    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?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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
    Code:
    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();
    }


  •  

    Posting Permissions

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