Question

If I "body onload="varname=setInterval etc, etc"" then I end up with two setInterval events running at once, if I get to "overload == true" it doesent reset the ketchCount and it doesent update the picture from the array, it just starts the setInterval and works from there. I know im pretty newby, but I would appreciate any help!

ketchupArray=new Array();
ketchupArray[0] = new Image(192, 168);
ketchupArray[0].src = "./pictures/levels/nothing.jpg?";
ketchupArray[1] = new Image(192, 168);
ketchupArray[1].src = "./pictures/levels/lowest.jpg?";
ketchupArray[2] = new Image(192, 168);
ketchupArray[2].src = "./pictures/levels/low.jpg?";
ketchupArray[3] = new Image(192, 168);
ketchupArray[3].src = "./pictures/levels/medium.jpg?";
ketchupArray[4] = new Image(192, 168);
ketchupArray[4].src = "./pictures/levels/high.jpg?";
ketchupArray[5] = new Image(192, 168);
ketchupArray[5].src = "./pictures/levels/highest.jpg?";

overload = false;
ketchCount = 0;
var lessCount;
var overCount;
var lessCountVar;

function overFunction()
{
overload == false;
ketchCount == 0;
document.getElementById("ketchupLevel").src = ketchupArray[ketchCount].src;
lessCountVar=setInterval(function(){lessCount()},5000);
}

function lessCount()
{
if (ketchCount == 0)
  {
  return;
  }
ketchCount--;
document.getElementById("ketchupLevel").src = ketchupArray[ketchCount].src;
}

function moreKetchup()
{
if (overload == true) 
  {
  return;
  }
ketchCount++;
document.getElementById("ketchupLevel").src = ketchupArray[ketchCount].src;
if (ketchCount == 5)
  {
  overload == true;
  clearInterval(lessCountVar);
  overCount=setTimeout(function(){overFunction()},5000);
  }
}

function lessKetchup()
{
if (overload == true)
  {
  return;
  }
else if (ketchCount == 0)
  {
  return;
  }
ketchCount--;
document.getElementById("ketchupLevel").src = ketchupArray[ketchCount].src;
}

Answer 1

Two things you may try:

in onload use setTimeout() to start overFunction() for the first time.

in overFunction() you probably have error in your code. You are comparing overload and ketchCount instead assigning values to them. The correct code should look more like

function overFunction()
{
  overload = false;
  ketchCount = 0;
  document.getElementById("ketchupLevel").src = ketchupArray[ketchCount].src;
  lessCountVar=setInterval(function(){lessCount()},5000);
}