We Keep Coding

I wrote a stopwatch code, but this code is not running

This is a stopwatch code. But it is not running, I don't know where I made a mistake, I have posting the Html part will have heading, time section and three anchor tags. In JavaScript code I have written simple logic to execute the stopwatch program.
<div class="container">
<h2>Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<div class="button">
play
pause
reset
</div>
</div>
<script>
window.onload = function() {
let seconds = 00;
let tens = 00;
let appendSeconds = document.getElementById('seconds');
let appendTens = document.getElementById('tens');
let buttonStart = document.getElementById('play');
let buttonStop = document.getElementById('pause');
let buttonReset = document.getElementById('refresh');
let interval;
buttonStart.onclick = function() {
clearInterval(interval);
interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(interval);
}
buttonReset.onclick = function() {
clearInterval(interval);
tens = "00";
seconds = "00";
appendSeconds.innerHTML = seconds;
appendTens.innerHTML = tens;
}
function startTimer () {
tens++;
if (tens <= 9) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9) {
appendSeconds.innerHTML = seconds;
}
}
}
<\script>
This code is just loading for 2 - 3 seconds.

Take a Look. Is that what you are looking for .? See in action
window.addEventListener('load', function () {
let seconds = 00;
let tens = 00;
let appendSeconds = document.getElementById('seconds');
let appendTens = document.getElementById('tens');
let buttonStart = document.getElementById('play');
let buttonStop = document.getElementById('pause');
let buttonReset = document.getElementById('refresh');
let interval;
buttonStart?.onclick = function() {
clearInterval(interval);
interval = setInterval(startTimer, 10);
}
buttonStop?.onclick = function(e) {
e.preventDefault();
clearInterval(interval);
}
buttonReset?.onclick = function(e) {
e.preventDefault();
clearInterval(interval);
tens = "00";
seconds = "00";
appendSeconds.innerHTML = seconds;
appendTens.innerHTML = tens;
}
function startTimer () {
tens++;
if (tens <= 9) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9) {
appendSeconds.innerHTML = seconds;
}
}
})
.btn{
padding: 10px;
background-color: red;
border-radius: 2px;
color: #fff;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2>Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<div class="button">
<a class="btn" id="play">play</a>
<a class="btn" id="pause">pause</a>
<a class="btn" id="reset">reset</a>
</div>
</div>

You should prevent default for links, either to add in the link itself like:
play
or to add in JS code like:
buttonStart.onclick = function (e) {
e.preventDefault();
clearInterval(interval);
interval = setInterval(startTimer, 10);
}
Also id of reset button was wrong
reset
let buttonReset = document.getElementById('reset');

stopwatch not functioning properly

I'm just starting with javascript, I've been trying to make a simple stopwatch, I found a couple of ways to do it , then I came across this function ... the code doesn't work as a stopwatch unless we return a function , can somebody help me understand why????
for (var i = 1; i <= 5; i++) {
var tick = function(i) {
return ()=>{console.log(i);}
};
setTimeout(tick(i), 500 * i);
}

You should use setInterval and clearInterval for your case.
var i = 10;
var tick = function(i) {
return ()=>{
console.log(i--);
if(i == 0) clearInterval(timer);
}
};
var timer = setInterval(tick(i), 500);
If you want to have stopwatch, you can clearInterval in stop button click event
function stop(){
clearInterval(timer);
}
Update:
I combined Start and Stop in only one button using addEventListener and removeEventListener
var i = 1;
var timer;
var tick = function(i) {
return ()=>{
console.clear();
console.log(i++);
//if(i == 0) clearInterval(timer);
}
};
function start(){
document.getElementById("start").disabled = true;
document.getElementById("stop").disabled = false;
timer = setInterval(tick(i), 500);
}
function stop(){
clearInterval(timer);
document.getElementById("stop").disabled = true;
document.getElementById("start").disabled = false;
}
(function() {
document.getElementById("start2").addEventListener("click", start2);
})();
function start2(){
timer = setInterval(tick(i), 500);
document.getElementById("start2").innerHTML = "Stop";
document.getElementById("start2").removeEventListener("click", start2);
document.getElementById("start2").addEventListener("click", stop2);
}
function stop2(){
clearInterval(timer);
document.getElementById("start2").innerHTML = "Start";
document.getElementById("start2").removeEventListener("click", stop2);
document.getElementById("start2").addEventListener("click", start2);
}
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()">Stop</button>
<h2>Combine Start and Stop</h2>
<button id="start2" >Start</button>

Because setTimeout first parameter has to be a function.
Your code works because it immediately executes the tick(i) function, which returns a function and that one is used 500ms later as callback.

below code will help you
<h1><time>00:00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
</pre>
<script>
var h1 = document.getElementsByTagName('h1')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0, minutes = 0, hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
start.onclick = function(){
timer();
start.disabled=true;
}
/* Stop button */
stop.onclick = function() {
clearTimeout(t);
start.disabled=false;
}
/* Clear button */
clear.onclick = function() {
h1.textContent = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
}
</script>

Minutes not showing on count-up timer

I'm working with the following script for a count-up timer. It has no problem counting up in seconds but I'm having trouble getting it to display minutes. For example 1:35 (one minute and 35 seconds)
Any suggestions would be appreciated. Thanks in advance.
var clicked = false;
var sec = 00;
var min = 00;
function startClock() {
if (clicked === false) {
clock = setInterval("stopWatch()", 1000);
clicked = true;
} else if (clicked === true) {}
}
function stopWatch() {
sec++;
document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML = 0;
clicked = false;
}
var min = 0;
var second = 00;
var zeroPlaceholder = 0;
var counterId = setInterval(function() {
countUp();
}, 1000);
function countUp() {
second++;
if (second == 59) {
second = 00;
min = min + 1;
}
if (second == 10) {
zeroPlaceholder = '';
} else
if (second == 00) {
zeroPlaceholder = 0;
}
document.getElementById("count-up").innerText = min + ':' + zeroPlaceholder + second;
}
<div class="timer">
<div id="timer">0:00</div>
<input type="button" id="btnParentButton" value="start timer" onClick="startClock()"/>

Hope this can help you.
The better way is to have your minutes and secs as global variable and simple function for each button
EDIT
Update code using pure JS
var min = 0;
var sec = 0;
var timer = undefined;
var isStarted = false;
function startcount(){
sec++;
if(sec==60)
{
sec=0;
min++;
}
updateClock();
}
function updateClock(){
var displaySec = sec < 10 ? "0" + sec : sec;
var displayMin = min < 10 ? "0" + min : min;
document.getElementById("count").innerHTML = displayMin + " : " + displaySec;
}
function start(){
if(timer == undefined || !isStarted){
timer = setInterval(function(){
startcount();
},1000);
}
isStarted = true;
}
function stop(){
isStarted = false;
clearInterval(timer);
}
function reset(){
stop();
min=sec=0;
timer = undefined;
updateClock();
}
updateClock();
<div id="count"></div>
<button class="start" onClick="start()">Start</button>
<button class="stop" onClick="stop()">Stop</button>
<button class="reset" onClick="reset()">Reset</button>

Put count-up instead id=timer
var clicked = false;
var sec = 00;
var min = 00;
function startClock() {
if (clicked === false) {
clock = setInterval("stopWatch()", 1000);
clicked = true;
} else if (clicked === true) {}
}
function stopWatch() {
sec++;
document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML = 0;
clicked = false;
}
var min = 0;
var second = 00;
var zeroPlaceholder = 0;
var counterId = setInterval(function() {
countUp();
}, 1000);
function countUp() {
second++;
if (second == 59) {
second = 00;
min = min + 1;
}
if (second == 10) {
zeroPlaceholder = '';
} else
if (second == 00) {
zeroPlaceholder = 0;
}
document.getElementById("count-up").innerText = min + ':' + zeroPlaceholder + second;
}
<div class="timer">
<div id="count-up">0:00</div>
<input type="button" id="btnParentButton" value="start timer" onClick="startClock()"/>

not calling internal function

i am just trying to do time counter. when 30 seconds will be over the alert box from another function will popup. i made the code and it's worked for some times too. but now it's not calling the function it only call when i refresh the page.
<html>
<head>
<title>Timer</title>
</head>
<body>
<form name="counter"><input type="text" size="8" name="d2"></form>
<script>
var milisec = 0
var seconds = localStorage.seconds || 30;
document.counter.d2.value = seconds;
function display() {
if (milisec <= 0) {
milisec = 9
seconds -= 1
}
if (seconds <= -1) {
milisec = 0
seconds += 1
}
else{
milisec -= 1
}
if(seconds <= 0 && milisec < 1)
{
console.log("done");
localStorage.clear();
anotherFunction();
}
else
{
localStorage.seconds = seconds;
}
document.counter.d2.value = seconds + "." + milisec;
if (seconds > 0 || (seconds == 0 && milisec > 0)) {
setTimeout(display, 100);
}
else
{
}
}
display();
function anotherFunction()
{
alert("reached");
}
</script>
</body>
</html>
`
here is the code.

I think this ones helps you.
if(seconds<=0)
{
throw '';
}
put this function before the function.

pause countdown javascript jquery

http://jsfiddle.net/vvccvvcc/mu45bptk/
how do I pause the timer? I want it to stop when it gets to 5 seconds
I tried this as seen in the fiddle
else {
isWaiting = true;
seconds--;
if (seconds == 5) {
seconds=seconds;}
}
does not work

The timer is initialized by setInterval(GameTimer, 1000);
if (seconds == 5) {
clearInterval(countdownTimer);
} else {
seconds--;
}
You will need to clear the interval in order to stop calling the function. Alternatively if you don't want to clear the interval you can say
if (seconds > 5) {
seconds--;
}
The way you've written it, second is decreased regardless of the condition (since it's before the if statement) and therefore, second = second becomes irrelevant.

Is this what you are looking for?
Fiddle: http://jsfiddle.net/mu45bptk/2/
var isWaiting = false;
var isRunning = false;
var seconds = 10;
var countdownTimer;
var finalCountdown = false;
function GameTimer() {
if (isWaiting) {
return;
}
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('waiting_time').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
if (finalCountdown) {
clearInterval(countdownTimer);
} else {
finalCountdown = true;
}
} else {
if (seconds == 5) {
isWaiting = true;
} else {
seconds--;
}
}
}
countdownTimer = setInterval(GameTimer, 1000);
You need to set isWaiting only if seconds == 5 and then check isWaiting on every run of GameTimer()