For Loop Not working with inner html Javascript

Question

I am writing a code in java script to display a countdown from 10 to 0. Loop is working for alert but when i use document.getElementById the loop doesn't work and it shows 0. Here's My Code

heading is the id of h1

           function msg(z)
            {
             try
               {
                  for(var i=0;i<=10;i++)
                   {
                     var seconds=z-i;
                       document.getElementById("heading").innerHTML="Select T 
            The Multiples of 2 in"+" "+seconds+" "+"seconds";
            }
     }
     catch(e)
         {
             document.write(e);
         }

There's no delay, you're going through the loop overwriting the previous value so fast you can't see the output. Look at `setTimeout` or `setInterval` — DBS, Jul 31 '18 at 08:06

score 1 · Accepted Answer · answered Jul 31 '18 at 08:06

1

Have you use debug tools to verify if the problem is in the loop? You are not waiting any second in each loop iteration, so youll see the end result as it will execute in much less than a second, so youll see 0 (the final iteration)

Take a look at this post Javascript Second Counter as is basically the same as you are trying to do.

Hope this helps

answered Jul 31 '18 at 08:06

Francisco Valle

613
10
10

1

Thanks a lot. it helped. – Saransh Khurana Jul 31 '18 at 08:18

score 0 · Answer 2 · answered Jul 31 '18 at 08:47

I Changed My function to this and it's working fine. P.S:- I Have Not added any constraints yet!

     function msg(){

     function timer()
     {
             seconds -=1;
        document.getElementById("heading").innerHTML="Select The Multiples of 2 in"+" "+seconds+" "+"seconds";
     }
              var cancel=setInterval(timer,1000);
setTimeout(function(){if(cout<10){alert("Time Over You Lose!");}else{alert("You Have Completed Level 1");}},10000);

 }

For Loop Not working with inner html Javascript

2 Answers2