Timer reaching zero then calling a function fail

Question

I have taken this simple timer method from here.

What I want is pretty simple, yet I can’t figure it out.

When the timer reaches zero (0:00), I want a popup alert. At the same time, the timer should continue in negative time.

So everything is working, except the popup. Any idea why?

window.onload = function() {
  var minute = 0;
  var sec = 3;
  setInterval(function() {
    document.getElementById("timer").innerHTML = minute + " : " + sec;
    sec--;
    if (sec == 00) {
      minute --;
      sec = 59;
      if (minute == 0 && sec == 00) {
        alert("You failed!");
      }
    }
  }, 1000);
}

  <div class="countdown" class="failed" id="coutdown">
      Time remaining to find solution: <span id="timer">10 : 00</span>
    </div>

Mohammed Rashad · Accepted Answer · 2022-04-08T01:24:15.117

1

window.onload = function() {
  var minute = 0;
  var sec = 3;
  var timer = document.getElementById("timer");
  setInterval(function() {
    if (sec === 0) {
      timer.innerHTML = minute + " : " + sec;
      if (minute === 0 && sec === 0) {
        alert("You failed!");
      }
      minute--;
      sec = 60;
    } else {
      timer.innerHTML = minute + " : " + sec;
    }
    sec--;
  }, 1000);
}

<div class="countdown" class="failed" id="coutdown">
  Time remaining to find solution: <span id="timer">10 : 00</span>
</div>

You are checking minute and second conditions after minute-- in your code, which means -1 is not equal to zero. Write an if condition before making minus 1 in your code.

Please use console.log("You failed!") instead of alert("You failed!") to ensure an accurate result.

edited Apr 08 '22 at 01:24

answered Apr 07 '22 at 16:08

Mohammed Rashad

154
8

You are supposed to correct 00 to 0 and == to === . Though the entire code needs to be restructured, alert pop out at 2s not at 0:0 – Wasiu Apr 07 '22 at 17:10
This solution does work, although @Wasiu is right, it pops out a bit early. What would be needed in terms of restructuring the code in order to work properly? I have no idea. – Louis.vgn Apr 07 '22 at 17:33
@Louis.vgn Please see the latest edit; the alert now appears exactly at 0 second; please use the console to see the accurate result. I hope you found this useful. – Mohammed Rashad Apr 08 '22 at 01:27

score 0 · Answer 2 · answered Apr 07 '22 at 15:59

0

Your conditional is checking whether sec == 0 immediately after you set sec = 59, so the conditional will never occur. Do you mean to have the order of this setter and the conditional swapped?

answered Apr 07 '22 at 15:59

ZacharySawtooth

1

This should be a comment instead of an answer – Pipe Apr 07 '22 at 16:00
I don't have comment privileges on this account yet. – ZacharySawtooth Apr 07 '22 at 16:05
I’m not sure what you mean @ZacharySawtooth – Louis.vgn Apr 07 '22 at 17:32
@Louis.vgn Have you used your browser's debugging tools before - where you can run your code one line at a time while you watch it? It's a vital area to become comfortable with for web development and I think it would go a long way in helping you see why your code is working the way it is. There are numerous guides out there on debugging JavaScript in your browser, but I can try to help if you get lost. – ZacharySawtooth Apr 07 '22 at 18:55
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 07 '22 at 20:20

score 0 · Answer 3 · answered Apr 08 '22 at 16:23

This is what I mean by restructuring the code entirely into reusable functions. comment what you don't understand and I will explain. I try not to hard code anything timer fetches its starter value from HTML.

const display = document.getElementById("timer");

function toArray(domEl){
  return domEl.innerHTML.split(':').map(el => +el);
 }



function getSec(timeArr){
   if(timeArr.length > 3 || timeArr.length === 0) return;
   return timeArr.reverse().map((el, i) => el * 60 ** i).reduce((cur,accu)=> cur + accu);
 }
 
let totalSec = getSec(toArray(display)) 



setInterval(()=>{
  totalSec--;
  display.textContent = formatTime(totalSec);
},1000)


function formatTime(sec){
  const time = {hr:0, min:0, sec:0};
  time.hr = ~~(sec/3600) || 0;
  time.min = ~~(~~(sec%3600)/60);
  time.sec = ~~(sec%3600)%60;
  if(time.hr===0 && time.min===0 && time.sec ===0) alert("You Faild!")
  return `${time.hr ? time.hr + ':':''}${padTime(time.min)}:${padTime(time.sec)}`
}

function padTime(time){
   return time? String(time).padStart(2,0):0;
}

<div class="countdown" class="failed" id="coutdown">
        Time remaining to find solution: <span id="timer">0:01:05</span>
</div>

Timer reaching zero then calling a function fail

3 Answers3