www.webdeveloper.com
Results 1 to 2 of 2

Thread: Problem with marking divs

  1. #1
    Join Date
    Sep 2012
    Posts
    4

    Problem with marking divs

    Hello. I've written this code:
    HTML Code:
    <body>
    	
    	<div class="divroboczy mainbord">
    		<div id="topwyruwnaj" class="divroboczy">
    			<div class="divroboczy topbord choice1"></div>
    			<div class="divroboczy topbord"></div>
    			<div class="divroboczy topbord"></div>
    			<div class="divroboczy topbord"></div>
    			<div class="divroboczy topbord"></div>
    			<div class="divroboczy topbord"></div>
    			<div class="divroboczy topbord"></div>
    			<div class="divroboczy topbordlast"></div>
    		</div>
    		<div id="topik" class="divroboczy">
    		</div>
    	</div>
    	
    	<script type="text/javascript" charset="UTF-8">
    		
    	function alarm(id) {
    		var tab = document.getElementById(id);
    		var td = tab.getElementsByTagName('div');
    		
    		for (x=0; x<td.length; x++) 
    		{
    			td[x].onclick = function() {
    				var zmienna = document.getElementById('topik');
    				zmienna.style.background = 'background-image: url(images/ban'+x+'.jpg)';
    			}
    		}
    	}	
     
    	alarm('topwyruwnaj')
    	</script>
    </body>
    I wanted to click on divs what would change the background image of div#topik. The problem is x has always value of 8. Why? And how to resolve it? The pictures names are: ban0.jpg, ban1.jpg etc.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    You discover a closure ! When you click the loop is off and x=8 ! Give ids (id0, id1, id2 ...) to your containers and use a this.id.substr(2) to change the background image... Or use a closure and increment x%td.length with each click.
    Last edited by 007Julien; 09-09-2012 at 04:18 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles