Why is the default running even though the num is set to 1?-CodePudding

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 !

CodePudding user response：

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 `
    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>

CodePudding user response：

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.