Javascript - The countdown timer is not working properly

I have created timer using javascript and its not working for the input value That I want instead its setting directly to 0 seconds just after submiting the form
here is my javascript code for countdown timer

 var seconds = <?php echo $num_questions * 60; ?>;
   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) 
                           window.location.href = 'http://localhost/final_generate/slideshow.php';
                 var countdownTimer = setInterval(secondPassed(), 1000);

Here In my form $num_questions contains a value of no.of questions user have entered through form , Basically the timer should be set for the value entered by user in no.of questions field but instead its is directly come to 0:00 just after clicking submit the form and redirect to form , I cant understannd how to fix this .
How can I fix it?

Check the page source for what PHP is assigning to seconds.

Also, currently setInterval doesn’t run, and the function only runs once.
That’s because you aren’t supposed to instantiate a function when using setInterval.

@Paul_Wilkinsits , its showing the error like this
Uncaught TypeError: Cannot set property ‘innerHTML’ of null
at secondPassed

That’s the browser console that you’re looking at.

Check the page source to find out what PHP is assigning to seconds.

@Paul_Wilkinsits hey I checked that and its just taking the input value which is entered by user through form field named no.of questions which is stored in a variable name $num_question i.e if I entered no.of questions = 6 then its just showing “Duration : 6” but not setting timer for 6 minutes, How can I check it? I am confused a bit

Is your setInterval line still instantiating the function? Because that is most likely to be the cause of your problem.

@Paul_Wilkinsits yes, but then I edited the line
var countdownTimer = setInterval(secondPassed(), 1000); and made it like this
var countdownTimer = setInterval(secondPassed, 1000); but its still setting to 0:00 directly and redirecting to my form
How can I correct it then?

To improve out ability at testing your code, please show us the page source with the HTML and the scripting.

The PHP source code that you first used is not a suitable for troubleshooting purposes.

@Paul_Wilkinsits so what should I do now Can I post the my rest code here ?because I am unable to figure out the where I am going wrong?

In case you weren’t aware, the webpage source code is partly different from the code that you edit in your editor.
You can right-click on the webpage and select “View page source” to obtain that.

It is that page source code that I am asking you for, which we haven’t received here yet.

Okk Thanks a lot . Its working now actually I removed the line of var seconds and put it in my output form code and then its working properly, but thanks for yor help, I also learnt some new thing from this conversation.

1 Like

@Paul_Wilkinsits hey sorry too bother you again , but the timer is again showing the same failure but ths time its working for $num_questions but instead when I assign var secons to anothe variable named $duration (duration is my other form field like questions), and I just chnged the nme there and its showing the failure again , and I checked the pgp source code also its just as same as it was for the $num_question.

When you assign a number to a form field, the form converts it to a string.
Without seeing what you’ve been doing, it’s a fair bet that when you retrieve duration from the form, that it’s a string and should be converted to a number.

A good way to do that is like this:

var duration = Number(form.elements.duration);

@Paul_Wilkinsits this is my code where I have declared $duration in the div tag whose id is countdown, and my javascript code for timer is same as it was before which I have mentioned in above post

This is the code for my form field duration

      <div class="row">
            <div class="col-25">
                <label for="duration"> Duration:</label>
            <div class="col-75">
                <input type="number" id="duration" name="duration">

this is my code where I am using $duration.

   <div class="timer" style= 'font-size: 25px;color:  black;'>Duration:
        <time id="countdown">
            <script> var seconds = <?php echo  $duration * 60; ?>;</script>
                <?php echo $duration; ?>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.