DaniWeb IT Discussion Community - Trying to change this JavaScript code, to work without External File..!! How?? plz

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

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

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 :)

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

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

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

Quote:

Originally Posted by Luckychap (Post 748526)

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?

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

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 ];

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

Quote:

Originally Posted by Luckychap (Post 748598)

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..

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

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

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

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.

Re: Trying to change this JavaScript code, to work without External File..!! How?? pl

Quote:

Originally Posted by Luckychap (Post 748727)

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 :)

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

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

Re: Trying to change this JavaScript code, to work without External File..!! How?? pl

Quote:

Originally Posted by Luckychap (Post 748923)

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

thanks again :)