Count down timer on button click - button

Question

So I created a count down timer that starts when the person clicks on the button. the countdown timer works but the issue i an running into are two things:
if a person click on the button a second time it speeds up the timers
If a person click on the button after the timer finish it starts to show a negative number.
I am still learning Java and cannot figure this one out.
<button
style="
background:#f1b005;
margin-bottom: 25px;
border:0px;
color: White;
text-align: center;
text-decoration: none;
display: inline-block;
height:50px;
width:125px;
border-radius: 5px;
align:center;
cursor: pointer;"
onclick="onTimer()">
120 Sec Rest
</button>
<div
style="60px;
font-size:30px;
text-align:center;
color:#f1b005;"
id="mycounter">
</div>
<script>
i = 120;
function onTimer() {
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('Times Up! Lets Get It!');
clearInerval(i);
}
else {
setTimeout(onTimer, 1000);
}
}
</script>

Answer 1

You have multiple mistakes.
You wrote clearInerval(i) instead of clearInterval(i).
You put the definition of i outside the function - so it's set once, and every time it's clicked, it does the function but does not reset i.
It speeds down because you are doing i--, which makes the value of i one lower.
The major problem is that you set i outside the function.
Try this:
<script>
function onTimer() {
i = 120;
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('Times Up! Lets Get It!');
clearInterval(i);
}
else {
setTimeout(onTimer, 1000);
}
}
</script>
Look here for an example of nicer code, just change i++ to i-- to make it count down instead of up in this example: Javascript Second Counter