Ticker Not Loading

I made a ticker for my site in JS. It's supposed to create a variable, then load content based on the value of the variable and add 1 to its value every time it loads new content (which is dictated by a timeout), until it eventually resets the variable to the starting value. Then it should load the content into a div on the page. But it's not changing the content in the div.
I have the script properly sourced, the timeout function called in the body tag, and the appropriate id in the div. And the JS is below:


function loadcontent(){
content=0
if (content==0){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://games.pehjota.com/'>Games</a></b><br>Play my games!";
content=content+1
}
if (content==1){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://radio.pehjota.com/'>P. J. Radio</a></b><br>Listen to my online radio!";
content=content+1
}
if (content==2){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://rhe.pehjota.com/'>Red Hat Entertainment</a></b><br>Watch my movies and shows!";
content=content+1
}
if (content==3){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://www.activeboard.com/forum.spark?forumID=84551'>Forum</a></b><br>Join my forum!";
content=content+1
}
if (content==4){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://random.pehjota.com/'>Random Stuff</a></b><br>Find funny jokes, quotes, pictures, and more!";
content=content+1
}
if (content==5){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://downloads.pehjota.com/'>Downloads</a></b><br>Like something on my site? Download it for free!";
content=content+1
}
if (content==6){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://tests.pehjota.com/'>Tests</a></b><br>Take my fun tests, including an 'Are you Special?' test!";
content=content-6
}
}
function loadticker(){
var t=setTimeout('loadcontent()',300)
}

There are a few issues. First you aren't calling loadcontent() other than the first time so you have to set a new timeout at the end of that function (I assume you are calling loadticker() somewhere else in your code). Second you are setting content=0 at the beginning of the function which resets which will be displayed each time, so it is necessary to move that outside the function. Third the way you have your if statements set up it just marched through and did them all. It is easier to just increment content once at the end and reset to zero if it past the last content.

There are a lot of ways to do this. Here is my take trying to make as few changes as possible to your code which simplifying it.


var content=0;
function loadcontent(){
if (content==0){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://games.pehjota.com/'>Games</a></b><br>Play my games!";
}
if (content==1){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://radio.pehjota.com/'>P. J. Radio</a></b><br>Listen to my online radio!";
}
if (content==2){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://rhe.pehjota.com/'>Red Hat Entertainment</a></b><br>Watch my movies and shows!";
}
if (content==3){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://www.activeboard.com/forum.spark?forumID=84551'>Forum</a></b><br>Join my forum!";
}
if (content==4){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://random.pehjota.com/'>Random Stuff</a></b><br>Find funny jokes, quotes, pictures, and more!";
}
if (content==5){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://downloads.pehjota.com/'>Downloads</a></b><br>Like something on my site? Download it for free!";
}
if (content==6){
document.getElementById('tickerdiv').innerHTML="<b><a href='http://tests.pehjota.com/'>Tests</a></b><br>Take my fun tests, including an 'Are you Special?' test!";
}
if (++content > 6) content = 0;

loadticker();
}
function loadticker(){
var t=setTimeout('loadcontent()',300)
}


Hopefully that helps.

david_kw

It works perfectly, thanks!

Not entirely sure how though, to be honest. Does the last if statement increment the content variable each time it checks it?

Yes, it is basically the same as

content=content+1;
if (content > 6) content = 0;

david_kw

Huh, never seen that before... That doesn't mean much though, because I am by no means an expert on JavaScript lol

I just noticed that when the page first loads in IE, the div with the class "main-main" loads with a very narrow width at first, before the first ticker content loads. The page is at http://www.pehjota.com/