How do I make a button process the same function more than once?

Question

How do I make a button process the same function more than once?

Navigation

#1 by (1 votes)

2

I am doing a Pomodoro Clock, it 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, besides setting the display of these buttons as "none"; .

>

The problem:

The problem occurs after the time of Pomodoro and the Short Break ends, when the Short Break ends, and I try to click to start a new Pomodoro Count, it does not 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>

javascript html html5

asked by anonymous 19.02.2017 / 17:51

1 answer

Implementation of a search box Recognize loop for other python scripts

score 1 · Accepted Answer

link

I made some changes, but kept their logic. To reuse the variables, I'll declare 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;
    }      
  }
}