Help with javascript code please??

Hi all. Could someone please explain to me how this code works (what each part of it does) to make a picture change colour at fixed intervals?? And I'm really stuck with what the role of the things in bold is. So if you can't be bothered with the rest I just need to know what those things do. Thanku in advance :smile:

<html>
<head>
<title> Webpage</title>
</head>
<body>
<h1> Colour changing car</h1></br>;
<img src="images/image1.jpg" alt="rotating image" width="80" height="160" id="rotator">
<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator'); // change to match image ID//
var imageDir = 'images/'; // change to match images folder
var delayInSeconds = 0.5; // set number of seconds delay// list image namesvar images = ['yellow_bulb.jpg','red_bulb.jpg', 'blue_bulb.jpg', 'green_bulb.jpg'];// don't change below this line
var num = 0;var changeImage = function() {
var len = images.length;
rotator.src = images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 500);
})();
</script>
</body>
</html>

Reply 1

Jooooshy

Original post by DD2508

It doesn't really change the colour, it just cycles through images of different coloured bulbs.

Set interaval will run the function changeImage after time period delayInSeconds*500.

Reply 2

A Mysterious Lord

Original post by DD2508

That's an image in HTML, it's been given the id 'rotator'.

That's a HTML script tag, the type of script is Javascript (there are many different types of script).

var rotator = document.getElementById('rotator'); // change to match image ID//

A local variable called rotator is being declared. This variable is being assigned the value of the image tag shown above. Therefore whenever 'rotator' is being mentioned in the code, it is referring to the image.

Therefore rotator.alt = "rotating image", rotator.width = "80", rotator.height = "160", rotator.id = "rotator" etc.

var num = 0;var changeImage = function() {

A local variable called num is being declared and given the value of 0.

A function called changeImage is the being declared.

var len = images.length;

A local variable called len is being declared and given the value of the images array length (if there are 5 images, this variable will be 5).

rotator.src = images[num++];

The source of the rotator image is being changed according to the value of num. If num = 3, the source of the image will be the value of images[3] (I take it you're up to speed on arrays?).

if (num == len) {