timer script not working.

LearningCoder · 09-10-2012, 10:02 PM

Hey, I have took some example code from my javascript book which is meant to display a different image every 3 seconds. I have 2 images currently (code is setup for 3) but when the switchImage() function runs, it changes the image, but my second image is not loading, it just shows the alt attribute value and doesn't load my second image. I thought it may be an issue with the src of the images because I was using it in an external javascript file, but I moved it inline within the head of my php file and yet it still doesn't work.

Does anyone possibly know what the issue may be?

Here is the code:

Code:

var currentImgNumber = 1;
var numberOfImages = 3;

function window_onload() {
   setTimeout("switchImage()", 3000);
}

function switchImage() {
   currentImgNumber++;
   document.imgAdvert.src = 'AdvertImage' + currentImgNumber + '.jpg';
   if(currentImgNumber < numberOfImages){
      setTimeout("switchImage()", 3000);
   }
}

HTML:

Code:

<body onload="window_onload()">

<img src="images/AdvertImage1.jpg" alt="HK" name="imgAdvert" class="adverts" border="0" />

Thank you for any help,

Kind Regards,

LC.

Old Pedant · 09-10-2012, 11:04 PM

Code:

   document.imgAdvert.src = 'AdvertImage' + currentImgNumber + '.jpg';
...
<img src="images/AdvertImage1.jpg" alt="HK" name="imgAdvert" class="adverts" border="0" />

Enough said? Apparently, you (as would be normal) don't have your images stored in two different directories. But your code says you do.

DanInMa · 09-10-2012, 11:13 PM

Im too slow never mind

LearningCoder · 09-10-2012, 11:23 PM

Quote:

Originally Posted by Old Pedant

Code:

   document.imgAdvert.src = 'AdvertImage' + currentImgNumber + '.jpg';
...
<img src="images/AdvertImage1.jpg" alt="HK" name="imgAdvert" class="adverts" border="0" />

Enough said? Apparently, you (as would be normal) don't have your images stored in two different directories. But your code says you do.

I also did notice that, so I changed the line of code to read:

Code:

document.imgAdvert.src = '../images/AdvertImage' + currentImgNumber + '.jpg';

thinking that this would solve the problem but it didn't. Does anyone know what I could do to fix this? Or point me in the right direction?

Thank you for replying,

Regards,

LC.

LearningCoder · 09-10-2012, 11:26 PM

Ah I've got it working. It seems I didn't need to use the '../' before stating the images/ directory.

Thank you for the hint.

Regards,

LC.

LearningCoder · 09-11-2012, 08:28 PM

Trying to update the function at the moment. I have put the image within an anchor tag like so:

Code:

<a href="http://z3.invisionfree.com/HunterKillerz/index.php?act=idx" name="advertLink" target="_blank">
      <img src="images/AdvertImage1.jpg" alt="adverts" name="imgAdvert" class="adverts" border="0" />
   </a>

as I want the user to be able to click the image as a link. What I want my function to do is set the href attribute of the anchor tag to the relative image when it has changed.

I have updated my function but it doesn't seem to be running at all now. When I load the page, the images are not switching.

Here is my code:

Code:

var links = new Array();

links[1] = "http://z3.invisionfree.com/HunterKillerz/index.php?act=idx";
links[2] = "http://labtec.0fees.net/Gardenable/index.htm";
links[3] = "http://gamebanana.com/";

var currentImgNumber = 1;
var numberOfImages = 3;

function window_onload() {
   setInterval("switchImage()", 3000);
}

function switchImage() {
   currentImgNumber++;
   document.advertLink.href = links[currentImgNumber];
   document.imgAdvert.src = 'images/AdvertImage' + currentImgNumber + '.jpg';
   if(currentImgNumber == 3){
       currentImgNumber = 0;
   }
}

Can anyone spot any errors?

Regards,

LC.

WolfShade · 09-11-2012, 08:37 PM

After the closing bracket, put

window.onload = window_onload;

LearningCoder · 09-11-2012, 08:52 PM

Which closing bracket?

On this line:

Code:

document.advertLink.href = links[currentImgNumber];

?

Regards,

LC.

WolfShade · 09-11-2012, 09:14 PM

The closing bracket after function switchImage()

Code:

function switchImage() {
    currentImgNumber++;
    document.advertLink.href = links[currentImgNumber];
    document.imgAdvert.src = 'images/AdvertImage' + currentImgNumber + '.jpg';
    if(currentImgNumber == 3){
        currentImgNumber = 0;
    }
 }
HERE

LearningCoder · 09-11-2012, 09:36 PM

Ah ok, no that still doesn't work. It works if I take this line out:

Code:

document.advertLink.href = links[currentImgNumber];

What am I doing wrong? I presumed that I could just iterate through the array using the same variable as I am using to loop through the images.

I have also tried:

Code:

<a href="return switchImage()" name="advertLink" target="_blank">
   <img ......../>
</a>

Changing the function to this:

Code:

function switchImage() {
   currentImgNumber++;
   var link = document.advertLink.href = links[currentImgNumber].value;
   document.imgAdvert.src = 'images/AdvertImage' + currentImgNumber + '.jpg';
   if(currentImgNumber == 3){
       currentImgNumber = 0;
   }
   return link;
}

.....but it still didn't work...

I am getting this error in FF:[21:46:28.469] TypeError: document.advertLink is undefined @ Site/javascripts/advert.js:16

Anyone know?

Regards,

LC.

LearningCoder · 09-11-2012, 09:52 PM

Update: Just figured it out.

Changed the line to read:

Code:

document.links.advertLink.href = links[currentImgNumber];

Thanks anyway,

Kind regards,

LC.