CODEWITHSUNDEEP
javascript
photogal57
photogal57

Reputation: 13

JavaScript Change Text in X Seconds - No Initial Display

I currently have a JavaScript file that will change the testimonial shown every five seconds. Everything works perfectly, except for the first five seconds, nothing appears. If I put a value where the JavaScript function is being called, it does show up initially, then is replaced by whatever the first testimonial is.

Here is the HTML code where the JavaScript is being called.

<html>
<head>

<SCRIPT language="JavaScript" SRC="textCycle.js"></SCRIPT>
</head>
<body>
    <table border = 0><tr><td style="width:300px;"> <!-- Change the height in order to determine width of quotes -->
    <div id="change"></div></td></tr></table>
</body>
</html>

Here is the Javascript:

var quotes=new Array(5);
var i = 0;
var authors=new Array(5);

//Load Quotes into array
quotes[0]="\"Website is awesome!\"";

quotes[1]="\"Love it!\"";

quotes[2]="\"Awesome site!\"";

quotes[3]="\"This site was very informative and helped with my problem.\"";

quotes[4]="\"Best site for helping with this issue.\"";

//Load authors that correspond with the quote array
authors[0]="Anonymous";

authors[1]="Anonymous";

authors[2]="Anonymous";

authors[3]="Anonymous";

authors[4]="Anonymous";

//Call the changeText() function every 5000 miliseconds
setInterval(changeText, 5000);

//Function that determine what quote and author to put in html.
function changeText(){
    document.getElementById("change").innerHTML=(quotes[i] + '<p style="text-align: right"><i>' + authors[i] + '</i></p>');
    if(i == 4)
        i = 0;
    else
        i++;
}

Is this just a matter of changing the javascript file so that quotes[0] is outside of the loop?

Note: The values in the arrays were changed to keep it anonymous. These aren't real testimonials.

Upvotes: 0

Views: 547

Answers (3)

Dark Falcon
Dark Falcon

Reputation: 44181

If you add the call to changeText() as mentioned, it likely still will not work. This is because the DOM has not been parsed yet. You should call it after the DOM is ready. One way to do this would be to put it in the onload event. This is the easiest way without a third-party library, but also waits until all images have been loaded. Here is an example:

<body onload="changeText()">

Upvotes: 0

Marc
Marc

Reputation: 11613

setInterval waits the interval duration (5 seconds) before executing the first time.

You could just call it once before setting the interval, and you'll be good to go. Eg:

//Call the changeText() function every 5000 miliseconds
changeText();
setInterval(changeText, 5000);

Upvotes: 0

Talha Akbar
Talha Akbar

Reputation: 10030

Just add changeText() (call your function) anywhere in your code before setInterval(). Well, it is not mandatory.

Fiddle

Upvotes: 1

Related Questions