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.
Check This Out! :)
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() {
clearInterval(timerID);
sec = 5;
$("#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>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>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>