How can I get my "clickMe!" button to work after I clear? All I get is "time's u-CodePudding

What I would like to happen after I use my Clear button, is to have my timer restart when I click the Click Me button another time. No matter what I try it will not work.

var sec = 5;
var timerID;

document.getElementById("b1").onclick = function() {
  timerID = setInterval(myTimer, 1000);
};

function myTimer() {
  document.getElementById("b1").onclick = function() {
    myTimer()
  }

  document.getElementById('demo').innerHTML = sec   "sec.";
  sec--;
  if (sec <= -1) {
    clearInterval(timerID);
    document.getElementById("demo").innerHTML = "Time's Up!";
  }
}

$(document).ready(function() {
  $("#b2").click(function() {
    $("#demo").html("");
  })
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <button id="b1">Click Me!</button>
  <p id="demo"></p>
  <button id="b2">Clear!</button>
</body>

</html>

What I would like my "Click Me" button to do the second time is to restart the timer. Thatis not what is happening. I ave tried many things all to no avail.

CodePudding user response：

In addition to removing the element's innerHTML, you also need to clear the interval.

var sec = 5;
var timerID;
document.getElementById("b1").onclick = function() {
  timerID = setInterval(myTimer, 1000);
};

function myTimer() {
  document.getElementById("b1").onclick = function() {
    myTimer()
  }
  document.getElementById('demo').innerHTML = sec   "sec.";
  sec--;
  if (sec <= -1) {
    clearInterval(timerID);
    document.getElementById("demo").innerHTML = "Time's Up!";
  }
}

$(document).ready(function() {
  $("#b2").click(function() {
    $("#demo").html("");
    clearInterval(timerID);
  })
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <button id="b1">Click Me!</button>
  <p id="demo"></p>
  <button id="b2">Clear!</button>
</body>

</html>

CodePudding user response：

The myTimer() function is removing the onclick action that starts the timer.

Just have the Clear button stop the timer, and keep the original onclick.

var sec = 5;
var timerID;

document.getElementById("b1").onclick = function() {
  timerID = setInterval(myTimer, 1000);
};

function myTimer() {
  document.getElementById('demo').innerHTML = sec   "sec.";
  sec--;
  if (sec <= -1) {
    clearInterval(timerID);
    document.getElementById("demo").innerHTML = "Time's Up!";
  }
}

$(document).ready(function() {
  $("#b2").click(function() {
    $("#demo").html("");
    clearInterval(timerID);
  })
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <button id="b1">Click Me!</button>
  <p id="demo"></p>
  <button id="b2">Clear!</button>
</body>

</html>