Trouble changing CSS classes

JavaScript
1

I’m trying to make a function that will change the classes of four images every 10 sec so that they rotate from foreground to background. I’ve tested the code with Firebug and it does not produce any errors. I’ve also placed a console.log inside of the loop so that I can confirm that the classes are being changed correctly. However, it simply does not seem to work. I think the problem might be in the JS where I concatenate “position” + i, but I’m not sure.

Here’s all the relevant code:

<body>
	<div id="page">

	<div class="container">
			<img src="images/one.jpg" class="position0" alt="" />
	
			<img src="images/two.jpg" class="position1" alt="" />
		
			<img src="images/three.jpg" class="position2" alt="" />
	
			<img src="images/four.jpg" alt="" class="position3" />
		
		</div>
	
	
	</div> <!-- page -->
	<script type="text/javascript" src="javascript/image-slider-test.js"></script>
	</body>

body {
	font-size: 100%;
	background: #242929;
}

#page {
	position: relative;
	width: 900px;
	margin: 100px auto 100px;
	height: 500px;
}

.container {
	position: relative;
	width: 363px;
	height: 256px;
}

.position0 {
	position: absolute;
	z-index: 4;
}

.position1 {
	width: 90%;
	height: 90%;
	opacity: .75;
	position: absolute;
	right: -12px;
	top: 5%;
	z-index: 3;
}

.position2 {
	width: 80%;
	height: 80%;
	opacity: .5;
	position: absolute;
	right: -24px;
	top: 10%;
	z-index: 2;
}

.position3 {
	width: 70%;
	height: 70%;
	opacity: .25;
	position: absolute;
	right: -36px;
	top: 15%;
	z-index: 1;
}

var change = function() {
	var images = document.getElementsByTagName("img");
	
	for(i = 0; i < images.length; i++) {
		images[i].className = "position" + i;
		console.log(images[i].className);
	}

};

// call change() every 10 sec
setInterval(change, 10000);

Thanks for helping!

2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
body {
	font-size: 100%;
	background: #242929;
}

#page {
	position: relative;
	width: 900px;
	margin: 100px auto 100px;
	height: 500px;
}

.container {
	position: relative;
	width: 363px;
	height: 256px;
}

.position0 {
	position: absolute;
	z-index: 4;
}

.position1 {
	width: 90%;
	height: 90%;
	opacity: .75;
	position: absolute;
	right: -12px;
	top: 5%;
	z-index: 3;
}

.position2 {
	width: 80%;
	height: 80%;
	opacity: .5;
	position: absolute;
	right: -24px;
	top: 10%;
	z-index: 2;
}

.position3 {
	width: 70%;
	height: 70%;
	opacity: .25;
	position: absolute;
	right: -36px;
	top: 15%;
	z-index: 1;
}
/*]]>*/
</style>
</head>

<body>
	<div id="page">

	<div class="container">
			<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" class="position0" alt="" />

			<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" class="position1" alt="" />

			<img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" class="position2" alt="" />

			<img src="http://www.vicsjavascripts.org.uk/StdImages/4.gif" alt="" class="position3" />

		</div>


	</div>
<script  type="text/javascript">
/*<![CDATA[*/
var change = function() {
	var images = document.getElementsByTagName("img");

 	for(var ary=[],i = 0; i < images.length; i++) {
		ary[i]=images[i]; // must put the images in an array to shuffle them
	}
    ary=shuffle(ary); // radomises the array
    for(var i = 0; i < ary.length; i++) {
		ary[i].className = "position" + i;
	}


};

function shuffle(ary){
 for (var r,t,z0=0;z0<ary.length;z0++){
  r=Math.floor(Math.random()*ary.length);
  t=ary[z0];
  ary[z0]=ary[r];
  ary[r]=t;
 }
 return ary;
}

// call change() every 10 sec
setInterval(change, 2000);
/*]]>*/
</script>
</body>

</html>
3

It does work as it is written.
what is happening the for loop did the same thing each time therefore each image had the same class as before.

But that is not what you wanted

Try an alternative to Vic’s

just replace your JavaScript file with this one.


var swap = (function () {
	var imgs, ii, jj, len, time;
	function change() {
	    for (ii = 0; ii < len; ii += 1) {
		    imgs[ii].className = 'position' + ((jj + ii) % 4);
		}
		jj += 1;
	}
	function init() {
		imgs = document.getElementsByTagName('img');
		jj = 1;
		len = imgs.length;
		time = setInterval(function () {change(); }, 1000);
	}
	return ({
	    start: init
	});
}());
window.onload = function () {
	swap.start();
};
4

The setTimeout() examples are pretty similar. Or
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures skip to “Creating closures in loops: A common mistake”

5

you seem to focus on Creating closures in loops so I checked mine and Vic’s for loops and no closures are included.

Please can you be more assertive in what you are trying to tell me…