How do a button process the same Function more than once?

Question

I’m making a Pomodoro Clock, consists of a clock that is a countdown of 25 minutes, after that 25 minutes has a Short Break, which is a 5 minute break for rest. My HTML5 code has two buttons that when clicked trigger a function to start the countdown, in addition to set the display of those buttons as "None";.

The problem:

The problem occurs after Pomodoro and Short Break is over, when Short Break is over, and I try to click to start a new Pomodoro Count, it doesn’t start this new count.

var countPomodoro = new Number();
var minutesPomodoro = 25;
var countPomodoro = 60;
var tempo = document.getElementById('tempo');
//Ao clicar no botão start ele começa uma contagem
function startPomodoro() {
  document.getElementById('start').style.display = "none";
  if ((countPomodoro - 1) >= 0 && (minutesPomodoro - 1) >= 0) {
    countPomodoro = countPomodoro - 1;
    if (countPomodoro == 0) {
      minutesPomodoro = minutesPomodoro - 1;
      if (minutesPomodoro == 0)
        countPomodoro = 0;
      else
        countPomodoro = 60;
    }
    if (countPomodoro < 10 && minutesPomodoro < 10) {
      tempo.innerText = "0" + minutesPomodoro + ":" + "0" + countPomodoro;
    } else if (countPomodoro < 10) {
      tempo.innerText = minutesPomodoro + ":" + "0" + countPomodoro;
    } else if (minutesPomodoro < 10) {
      tempo.innerText = "0" + minutesPomodoro + ":" + countPomodoro;
    } else {
      tempo.innerText = minutesPomodoro + ":" + countPomodoro;
    }
    setTimeout('startPomodoro();', 1000);

    if (minutesPomodoro == 0)
      document.getElementById('shortbreak').style.display = "block";
  }
}

var countBreak = new Number();
var minutesBreak = 5;
var countBreak = 60;

//Ao clicar no botão Short Break começa uma contagem
function startShortBreak() {
  document.getElementById('shortbreak').style.display = "none";
  if ((countBreak - 1) >= 0 && (minutesBreak - 1) >= 0) {
    countBreak = countBreak - 1;
    if (countBreak == 0) {
      minutesBreak = minutesBreak - 1;
      if (minutesBreak == 0)
        countBreak = 0;
      else
        countBreak = 60;
    }
    if (countBreak < 10 && minutesBreak < 10) {
      tempo.innerText = "0" + minutesBreak + ":" + "0" + countBreak;
    } else if (countBreak < 10) {
      tempo.innerText = minutesBreak + ":" + "0" + countBreak;
    } else if (minutesBreak < 10) {
      tempo.innerText = "0" + minutesBreak + ":" + countBreak;
    } else {
      tempo.innerText = minutesBreak + ":" + countBreak;
    }
    setTimeout('startShortBreak();', 1000);
  }
}

<input id="start" type="button" name="submit" value="Start" onclick="startPomodoro();">
<input id="shortbreak" type="button" name="submit" value="Short Break" style="display: none;" onclick="startShortBreak();">

<div id="tempo"></div>

Answer 1

https://jsfiddle.net/tL0Ljn28/2/

I made some changes, but keeping your logic. To reuse the variables, I declared them before the functions.

var countPomodoro = new Number();
var minutesPomodoro = 2;
var countPomodoro = 60;
var countBreak = new Number();
var minutesBreak = 5;
var countBreak = 60;

var tempo = document.getElementById('tempo');
//Ao clicar no botão start ele começa uma contagem
function startPomodoro() {
  document.getElementById('start').style.display = "none";
  if ((countPomodoro - 1) >= 0 && (minutesPomodoro) >= 0) {
    countPomodoro = countPomodoro - 1;
    if (countPomodoro == 0) {
      minutesPomodoro = minutesPomodoro - 1;
      if (minutesPomodoro == -1) {
        countPomodoro = 0;
        minutesPomodoro = 0;
      }     else {
        countPomodoro = 59;
      }
    }
    if (countPomodoro < 10 && minutesPomodoro < 10) {
      tempo.innerText = "0" + minutesPomodoro + ":" + "0" + countPomodoro;
    } else if (countPomodoro < 10) {
      tempo.innerText = minutesPomodoro + ":" + "0" + countPomodoro;
    } else if (minutesPomodoro < 10) {
      tempo.innerText = "0" + minutesPomodoro + ":" + countPomodoro;
    } else {
      tempo.innerText = minutesPomodoro + ":" + countPomodoro;
    }
    setTimeout('startPomodoro();', 1);

    // Para mostrar, quando os segundos e o minutos estiverem zerados
    if (minutesPomodoro == 0 && countPomodoro == 0) {
        document.getElementById('shortbreak').style.display = "block";
      countBreak = new Number();
      minutesBreak = 5;
      countBreak = 60;
    }

  }
}

//Ao clicar no botão Short Break começa uma contagem
function startShortBreak() {
  document.getElementById('shortbreak').style.display = "none";
  if ((countBreak - 1) >= 0 && (minutesBreak) >= 0) {
    countBreak = countBreak - 1;
    if (countBreak == 0) {
      minutesBreak = minutesBreak - 1;
      if (minutesBreak == -1) { // Para realizar a contagem, quando for no 00 minutos.
        countBreak = 0;
        minutesBreak = 0;
      } else {
        countBreak = 59;
      }
    }
    if (countBreak < 10 && minutesBreak < 10) {
      tempo.innerText = "0" + minutesBreak + ":" + "0" + countBreak;
    } else if (countBreak < 10) {
      tempo.innerText = minutesBreak + ":" + "0" + countBreak;
    } else if (minutesBreak < 10) {
      tempo.innerText = "0" + minutesBreak + ":" + countBreak;
    } else {
      tempo.innerText = minutesBreak + ":" + countBreak;
    }
    setTimeout('startShortBreak();', 10);

    // Para poder reiniciar a contagem
    if (countBreak == 0) {
      document.getElementById('start').style.display = "block";
      minutesPomodoro = 1;
      countPomodoro = 60;
    }      
  }
}