Problem with marking divs

**Fray** · 09-09-2012 02:18 PM

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.

**007Julien** · 09-09-2012 04:12 PM

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.

Thread: Problem with marking divs

Thread Tools

Display

Problem with marking divs

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions