Javascript - The countdown timer is not working properly

JavaScript
1

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

       <script>
 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) 
                         {
                           clearInterval(countdownTimer); 
                           window.location.href = 'http://localhost/final_generate/slideshow.php';
                         } 
                    else
                         {
                          seconds--;
                         }
               }
                  
                 var countdownTimer = setInterval(secondPassed(), 1000);
             </script>

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?

2

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.

3

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

4

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

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

5

@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

6

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

7

@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?

8

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.

9

@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?

10

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.

11

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
12

@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.

13

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);
14

@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>
            <div class="col-75">
                <input type="number" id="duration" name="duration">
            </div>
        </div>

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; ?>
        </time>
    </div>
15

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