HTML Javascript - setInterval is not running properly

Question

I am attaching my code below here for the use of setInterval() function of Javascript. The code runs only one time afer that it is not running docoment.write to write the value of i in the browser. Could anyone pls let me know at which place I am wrong with my code :

<html>
<head>
    <script type="text/javascript">
    function inCreas(){
        var i = 0;
        var interval = setInterval(func,2000);
        function func(){i++;
            document.write("<p>This is the value of i : "+ i +"</p>");
            }
    }
    </script>
    </head>
    <body onload="inCreas()">

    </body>
    </html>

I have tried it in IE 8 and Firefox 24.0, but result is same.

Thanks in advance. Vasudev

You can't use document.write after the document has finished loading. Select the element you want to add the content to and either create the new DOM node(s) and append them or append the extra HTML string to its innerHTML property. — Anthony Grist
– Anthony Grist, Commented Nov 23, 2013 at 14:46

Christoph · Accepted Answer · 2013-11-23 15:12:27Z

1

document.write works only as long as the document is "open". It get's closed when the end html tag is reached. After that, calling document.write opens an entirely new document.

Now this happens in your page:

The original document is created and the onload function is registered.
the document is closed
the setInterval function triggers
Because the existing document is already closed, a new one is created, completely overwriting the old one. You can test this by putting some stuff inside the body tag - it will disappear as soon as the document.write is executed. This creates an entirely new context - your setInterval is also not present any more in the new document.

To achieve the effect you want, you could use innerHTML instead - see the DEMO.

answered Nov 23, 2013 at 15:12

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML Javascript - setInterval is not running properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related