如何使带有呼叫功能的多个按钮全部起作用

Question

I'm trying to have multiple buttons which each have an individual call function, but either all the buttons do the same thing or none of them work at all. So this is my first button:

<button id="study" onclick="call();">Study</button>

And this is its script:

var callCount = 0;

function one() {
   changeImage1('Call one');
   {
    var img = document.getElementById("image");
    img.src="images/tumblr_dash.gif";
   document.getElementById("action").innerHTML = "You have decided to study";
   }
}

function two() {
   changeImage2('Call two');
   {
   var img = document.getElementById("image");
   img.src="images/tumblr_dash.gif";
   document.getElementById("action").innerHTML = "You have decided to start studying in a minute";
   }
}
function three() {
   changeImage3('Call three');
   {
   var img = document.getElementById("image");
   img.src="images/study.gif";
   document.getElementById("action").innerHTML = "You are currently studying";
   }
}

function call(){
  callCount++;
  var btn = document.getElementById('study');
   if(callCount == 1) one();
   else if(callCount == 2) two();
  else if(callCount == 3) three();
  else btn.disabled = true;

  //callOne = false /*!callOne;*/
}

And that works fine. But when I put in my second button:

<button id="eat" onclick="call1();">Eat</button>

Which has this script:

var callCount1 = 0;

function one1() {
   changeImage1('Call one');
   {
    var img = document.getElementById("image");
    img.src="images/tumblr_dash.gif";
   document.getElementById("action").innerHTML = "You have decided to study";
   }
}

function two1() {
   changeImage2('Call two');
   {
   var img = document.getElementById("image");
   img.src="images/tumblr_dash.gif";
   document.getElementById("action").innerHTML = "You have decided to start eating in a minute";
   }
}
function three1() {
   changeImage3('Call three');
   {
   var img = document.getElementById("image");
   img.src="images/eat.gif";
   document.getElementById("action").innerHTML = "You are currently eating";
   }
}

function call1(){
  callCount1++;
  var btn = document.getElementById('eat');
   if(callCount1 == 1) one();
   else if(callCount1 == 2) two();
  else if(callCount1 == 3) three();
  else btn.disabled = true;

  //callOne = false /*!callOne;*/
}

It performs the same functions as the first button, instead of doing what I'm asking it to. I've tried changing the numbers of the ChangeImage function but it does nothingHow do I fix this?

Answer 1

Function call1() calls one() two() and three() instead of one1() two1() and three1() . That may be the problem.