let spans = document.querySelector(`#spans`);
let hrs = document.querySelector(`#hrs`);
let mins = document.querySelector(`#mins`);
let secs = document.querySelector(`#secs`);
let start = document.querySelector(`#start`);
let stop = document.querySelector(`#stop`);
spans.style.fontSize = "10em";
let preFix = 0;
let num = 1;
let secspreNum= 0;
let minspreNum = 0;
let hrspreNum = 0;
let myFunc = ()=> {
setInterval(()=>{
switch (num){
case num===1:
mins.innerHTML = `0` + num;
num ===0;
secs.innerHTML =`0`+ num++;
default:
console.log(`default test`)
}
} , 1000);
};
start.addEventListener(`click`,myFunc) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="spans">
<span id="hrs">00</span>:<span id="mins">00</span>:<span id="secs">00</span><br></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<script src="go2.js"></script>
</body>
</html>Hello, I'm trying to make a stopwatch atm but I got stuck into a problem. Trying to use the switch statement to set the mins to add up a number if the secs reach 10. But before doing that I've been testing this switch statement and for some reason it runs default statement instead of case . Why is it like that? I set the num variable to 1 and it still runs the default one instead of num===1 . Did I missunderstood something? Thanks !
Here is a working version
I changed your querySelector and unnecessary template literals
let spans = document.getElementById('spans');
let hrs = document.getElementById('hrs');
let mins = document.getElementById('mins');
let secs = document.getElementById('secs');
let start = document.getElementById('start');
let stop = document.getElementById('stop');
let tId;
let num = 0;
let myFunc = () => {
clearInterval(tId);
tId = setInterval(function() {
const date = new Date(null); // alternatively calculate hh,mm,ss using %60
date.setSeconds(++num);
const [hh, mm, ss] = date.toISOString().substr(11, 8).split(":");
hrs.textContent = hh;
mins.textContent = mm;
secs.textContent = ss;
}, 1000)
};
start.addEventListener('click', myFunc)
stop.addEventListener('click', function() {
clearInterval(tId)
})#spans {
font-size: 10em
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="spans">
<span id="hrs">00</span>:<span id="mins">00</span>:<span id="secs">00</span><br></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<script src="go2.js"></script>
</body>
</html>try this:
let myFunc = ()=> {
setInterval(()=> {
switch (num) {
case 1:
console.log(num)
mins.innerHTML = `0` + num;
secs.innerHTML =`0`+ (num++);
break;
default:
console.log(`default test`)
}
} , 1000);
};
case takes constants and not expressions afaik. You also have to break or the code will "fall through" to the next condition.