javascript function is not working on button click. But working without button click

Question

In this function, I have implemented a timer which is working fine in the given html input box without onclick function 'start_test'. but i want to start this inner function on button click which is not working. PLease help me to find the mistake.

function start_test() {

        var hms = "01:30:00";
        var a = hms.split(':'); // split it at the colons
        
        // minutes are worth 60 seconds. Hours are worth 60 minutes.
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 
        
        if( seconds > 0 ){  
          function secondPassed() {
              var minutes = Math.round((seconds - 30)/60),
                  remainingSeconds = seconds % 60;

              if (remainingSeconds < 10) {
                  remainingSeconds = "0" + remainingSeconds;
              }

              document.getElementById('countdown').innerHTML = " " +minutes + ":" + remainingSeconds;
              if (seconds == 0) {
                  clearInterval(countdownTimer);
                 //form1 is your form name
                document.form_quiz.submit();
              } else {
                  seconds--;
              }
          }
          var countdownTimer = setInterval('secondPassed()', 1000);

          } 
    }
<div class="col-md-4" style="text-align: right;">
    <button  class="btn btn-primary" id="start_test" onclick="start_test();" >Start Test</button>
        <input type="hidden" value="<?php echo date('M d Y');?>" id="c_month">
        <h2><time id="countdown">01:30:00</time>   </h2>          
</div>

You're passing the function as a string `'secondPassed()'`. Just make it `setInterval(secondPassed, 1000)`. — El_Vanja, Dec 18 '20 at 15:54
the direct use of the setInterval method to measure time is inappropriate — Mister Jojo, Dec 18 '20 at 16:00
have a look to https://stackoverflow.com/questions/65039872/what-am-i-doing-wrong-in-my-settimeout-call/65039897#65039897 — Mister Jojo, Dec 20 '20 at 04:06

Mister Jojo · Answer 1 · 2020-12-18T17:06:09.510

in setInterval(timePassed, 1000) this is 1s or MORE
=> 1000mms is just an indication, the time elapsed depend of the proccessor usage

PROOF:

const one_Sec  = 1000
    , one_Min  = one_Sec * 60
    , one_Hour = one_Min * 60 
    , biDigits = t => t>9?t:`0${t}`
    , c_pseudo = document.getElementById('countdownP')
    , c_real   = document.getElementById('countdownR')
    , btTest   = document.getElementById('bt-test')
    ;
btTest.onclick=()=>
  {
  btTest.disabled = true
  
  let [t_h,t_m,t_s] = '01:30:00'.split(':').map(v=>+v)
    , timeEnd       = new Date().getTime() + (t_h * one_Hour) + (t_m * one_Min) + (t_s * one_Sec)
    , timerRef      = setInterval(timePassed, 1000) // 1s or MORE !  
    ;
  function timePassed()
    {
    if (--t_s <0) { t_s = 59; --t_m}
    if (t_m <0)   { t_m = 59; --t_h }
    c_pseudo.textContent = `${biDigits(t_h)}:${biDigits(t_m)}:${biDigits(t_s)}`

    let tim = timeEnd - (new Date().getTime()) 

    let tr_h = Math.floor(tim / one_Hour)
    let tr_m = Math.floor((tim % one_Hour) / one_Min )
    let tr_s = Math.floor((tim % one_Min ) / one_Sec )

    c_real.textContent = `${biDigits(tr_h)}:${biDigits(tr_m)}:${biDigits(tr_s)}`

    if ( !t_h && !t_m && !t_s) 
      {
      btTest.disabled = false
      clearInterval(timerRef)
      }
    }
  }

<button  id="bt-test" >Start Test</button>

<h2> pseudo count down  <span id="countdownP">01:30:00</span> </h2>          
<h2> real count down    <span id="countdownR">01:30:00</span> </h2>

score -1 · Answer 2 · answered Dec 18 '20 at 15:54

-1

This statement is declaring a function countdownTimer, not executing it.

var countdownTimer = setInterval('secondPassed()', 1000);

Try replacing with:

setInterval(() => secondPassed(), 1000);

This should actually execute setInterval

answered Dec 18 '20 at 15:54

Neil W

7,670
3
28
41

great ,Its working fine. thank you so much – komal verma Dec 18 '20 at 15:59
simply use `var countdownTimer = setInterval( pseudoSecondPassed, 1000);` – Mister Jojo Dec 18 '20 at 16:01

javascript function is not working on button click. But working without button click

2 Answers2