Trying to change this JavaScript code, to work without External File..!! How?? plz

Question

Q8iEnG 0 Junior Poster

15 Years Ago

Hi guys.. :)

I'm still on my way on learning and seeing examples of JavaScript Codes

Today I saw this code (which depends on external file called *banner.js*)

<!-- Paste this code into an external JavaScript file named: banner.js.js  -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Lee Underwood :: http://javascript.internet.com/ */

var bannerImg = new Array();
  // Enter the names of the images below
  bannerImg[0]="image_jss.gif";
  bannerImg[1]="image_js.gif";
  bannerImg[2]="image_wr.gif";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 4*1000);
}
window.onload=cycleBan;



<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->

<script type="text/javascript" src="banner.js.js"></script>



<!-- Paste this code into the BODY section of your HTML document  -->

<img src="image_jss.gif" name="banner">
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

I've tried to make it work without using (external file), but it doesn't work!!! please anyone can tell me where's my mistake?
here's my code

<script type="text/javascript"> // adding the JavaScript prototype

var bannerRotate = new Array(); // creating new Array named "banner", and we set its value to unknown by saying * new Array() *
// Here you can create a list of whatever, images you want to add..
bannerRotate[0] = "image.gif";
bannerRotate[1] = "image2.gif";
bannerRotate[2] = "image3.gif";

var getNewBanner = 0;
var total = bannerRotate.length;

function rotate()
{
	getNewBanner++;
	
	// if statement to check the condition getNewBanner == to the total number of images, or not? if yes, then starts again from ZERO
	if( getNewBanner == total )
	{
		getNewBanner = 0;
		
	}
	
	document.banner.src=bannerRotate[ getNewBanner ];
	setTimeout = ( "rotate()", 4*1000 );
	
} // end function rotate

window.onload = rotate();

</script>

here's the code in <body>

<img src="image.gif" name="banner">

waiting for the help to keep learning from my mistakes :)

thanks in advance :)

javascript

2 Contributors
9 Replies
178 Views
21 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by Q8iEnG

Luckychap 68 Posting Pro in Training

15 Years Ago

You do not have to post for these silly mistakes. Here is what is wrong:

You have put :

setTimeout = ( "rotate()", 4*1000 );

Instead of this:

setTimeout ( "rotate()", 4*1000 );

You should have copy/pasted that code :D

Luckychap 68 Posting Pro in Training

15 Years Ago

Your code is not working because for the first time when rotate is called document.banner is undefined. And setting properties to undefined objects (documet.banner.src = somthing) result in crash.

So when ever you want to set the property to any HTML element in javascript, first check that if it is defined yet or not and apply properties only when they are defined.

if(document.banner)
     document.banner.src = bannerRotate[ getNewBanner ];

Luckychap 68 Posting Pro in Training

15 Years Ago

I also said for the first time only it is undefined. But not exactly knows why it is not defined on the first time?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Q8iEnG 0 Junior Poster · Answer 1 · 2008-12-02T12:21:57+00:00

You do not have to post for these silly mistakes. Here is what is wrong:
You have put :
setTimeout = ( "rotate()", 4*1000 );
Instead of this:
setTimeout ( "rotate()", 4*1000 );
You should have copy/pasted that code :D

thanks I did made it, but it did'nt work!!

please.. anything else is wrong?

Q8iEnG 0 Junior Poster · Answer 2 · 2008-12-02T15:44:01+00:00

Your code is not working because for the first time when rotate is called document.banner is undefined. And setting properties to undefined objects (documet.banner.src = somthing) result in crash.
So when ever you want to set the property to any HTML element in javascript, first check that if it is defined yet or not and apply properties only when they are defined.
if(document.banner)
     document.banner.src = bannerRotate[ getNewBanner ];

so you meant that the problem is from this code??

Ok, is it necessary to use that code?

if(document.banner)
     document.banner.src = bannerRotate[ getNewBanner ];

please could anyone explain to me just why we used (document.banner.src)???
it is not defined I mean in my whole code there's no (banner) so where did it comes from? and how it works?

thanks in advance :) will be much more appreciated..

Luckychap 68 Posting Pro in Training · Answer 3 · 2008-12-02T17:55:54+00:00

I got it should be:

window.onload = rotate;

Not

window.onload = rotate();

the later actually calls rotate() before the page is rendered. But former assign the rotate() function to window.onload event.

Q8iEnG 0 Junior Poster · Answer 4 · 2008-12-02T22:37:49+00:00

I got it should be:
window.onload = rotate;
Not
window.onload = rotate();
the later actually calls rotate() before the page is rendered. But former assign the rotate() function to window.onload event.

no it is ok, the script is working now when I changed what u said about the (if statement)

but please, can you explain please why in the the use of (document.banner.src=...)!!!!

I really didn't got why he used it!!, I just copied it and it works, but I don't know why he used it!

I mean I know that I can write (document.write() )

but this is my first time seeing ( document.banner.src)!!!

what I want is to know, why he used (.banner)!!?

thanks for the further help :)

Luckychap 68 Posting Pro in Training · Answer 5 · 2008-12-02T23:54:03+00:00

No window.onload = rotate(); is not correct way to attached a function to onload event. As I told you before window.onload = rotate(); will first call it (before the page is rendered as you have put this code before <img src='image.jpg' name='banner'> is rendered on document ) and then it will be assigned to onload event.

I used if-condition to bypass the first call to rotate as at that time <img> tag was not rendered in the document and hence document.banner was undefined leading to crash when try to apply property to undefined object (document.banner.src).

So few points you should note about above code:
1) function name followed by () will call it.
2) always check if the object is defined before applying any properties.

Thankyou

Q8iEnG 0 Junior Poster · Answer 6 · 2008-12-03T00:41:42+00:00

No window.onload = rotate(); is not correct way to attached a function to onload event. As I told you before window.onload = rotate(); will first call it (before the page is rendered as you have put this code before <img src='image.jpg' name='banner'> is rendered on document ) and then it will be assigned to onload event.
I used if-condition to bypass the first call to rotate as at that time <img> tag was not rendered in the document and hence document.banner was undefined leading to crash when try to apply property to undefined object (document.banner.src).
So few points you should note about above code:
1) function name followed by () will call it.
2) always check if the object is defined before applying any properties.
Thankyou

thanks for being on touch and being so helpful, god bless

thanks again :)