my for loop dosen't work on chrome but works on firefox

Question

guys would you check this code out ?? I'm new in javascript. i dont know whats wrong with this code it works just after a refresh on firefox and dosen't work on chrome.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="txt"></p>
        <input id="num" type="text" value="Type a number">

        <!--Javascript starts-->
        <script>
            var num = document.getElementById("num").value;
     function count()
     {
         for(i = 0; i<=num; i++)
         {
             document.write("Number: "+i+" <br/>");
             
         }
         
     }
        </script>
        <!--End of Javascript-->
        
       <button onclick="count()">Click on me</button>
    </body>
</html>

score 1 · Accepted Answer · answered Jun 30 '20 at 17:43

The only issue i can see here is that you are not accessing the current value of num input. I have placed it inside count function so that every time you hit click button you will get updated value of num input.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="txt"></p>
        <input id="num" type="text" value="Type a number">

        <!--Javascript starts-->
        <script>
            
     function count()
     {
         var num = document.getElementById("num").value;
         for(i = 0; i<=num; i++)
         {
             document.write("Number: "+i+" <br/>");
             
         }
     }
        </script>
        <!--End of Javascript-->
        
       <button onclick="count()">Click on me</button>
    </body>
</html>

score 1 · Answer 2 · answered Jun 30 '20 at 17:50

You are not assigning the input value to the num variable. You should assign the value to the num variable inside of the function. As you have written the assignment line outside of the function, it is only run when the script is initially executed and not on the button click. So the value of num remains undefined.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="txt"></p>
        <input id="num" type="text" value="Type a number">

        <!--Javascript starts-->
        <script>
            
     function count()
     {
          var num = document.getElementById("num").value;
         for(i = 0; i<=num; i++)
         {
             document.write("Number: "+i+" <br/>");
             
         }
         
     }
        </script>
        <!--End of Javascript-->
        
       <button onclick="count()">Click on me</button>
    </body>
</html>

score -1 · Answer 3 · answered Jun 30 '20 at 17:43

enter code hereThis is because you didn't define i. instead of writing i=0 it would be better practice to use var i = 0 or let i = 0. Also if you write something in the input that i not a number it will return a error. You also defined num the 1st tick before you changed the input, it would be better to read the input right before you start counting.

Improved Code

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="txt"></p>
        <input id="num" type="text" value="Type a number">

        <!--Javascript starts-->
        <script>
            var num = 0;
     function count()
     {
         num = document.getElementById("num").value;
         for(var i = 0; i<=num; i++)
         {
             document.write("Number: "+i+" <br/>");
             
         }
         
     }
        </script>
        <!--End of Javascript-->
        
       <button onclick="count()">Click on me</button>
    </body>
</html>

Note: `document.write` is generally frowned upon [source](https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write) — voxal, Jun 30 '20 at 17:44
OP's issue has nothing to do with using `i` instead of `var i`. `i` will get you a warning, but no browser will refuse to run it for that reason. Furthermore, while `var i` would have been best practice five years ago, these days there is no good reason to use `var` over `let` or `const` in new code. (Of course `const` won't work here.) — A. R., Jun 30 '20 at 18:29

my for loop dosen't work on chrome but works on firefox

3 Answers3

Improved Code