Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts

    setInterval question

    Hey guys,

    Im playing around with JS trying to learn more and i have come across this bit of code

    Code:
    <script type="text/javascript">
    		
    	function print () {
    		document.write("Words ");
    	}
    
    	setInterval("print()", 1000);
    	
    </script>
    Just having problems getting it to display correctly in all browsers its displaying the first Words fine in all but will only continue to reprint "Words" in chrome.

    Thanks any help tips ideas would be great.
    .pLeAd InSaNiTy.

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi

    I think because you are using document.write which is used only once on page load.


    try this using innerHTML --

    Code:
    		<div id="words"></div>
    <script type="text/javascript">
    
    		var count = 0;
    function print (){
      if (count < 10 ){
    		var ele =document.getElementById("words");
    		ele.innerHTML += "words<br />"; //add one word
    		count++;
    	}
    }
    	setInterval("print()", 1000);
    	
    </script>
    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Yep, when you use document.write after a page is loaded, it *WIPES OUT* the entire page, including even the JavaScript code that did the write!

    And by definition, the code executed by setInterval will not execute until the page is indeed fully loaded. Ergo...one document.write and you are all done. Kablooey.

    ******

    I love your "It's only simple if...", low tech, but there are many even easier ways to make JavaScript code obscure. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    frustrating when dealing with multiply browsers. Is this a known site of all compatibility issues with each browser that lists what does and doesn't work?

    Thanks for your quick reply's
    .pLeAd InSaNiTy.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    ??? This one is *NOT* browser dependent. ALL browsers work this way.

    Here's a hint for you: If at all possible, don't use document.write. If you *must* use it, only use it in-line in your HTML, between the <body> and </body> tags, and never in response to any kine of human interaction or a timer.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    To re-inforce the message:-


    document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page. So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    but my code does works fine in chrome every second it does what the function instructs ie prints "Words" but none the less ill be trying to learn more about innerHTML havn't had much to do with it as of yet.

    Thanks for your detailed replies
    .pLeAd InSaNiTy.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Chrome is, I think, wrong in what it does.

    However...

    If you try it again and have *ANY* other content in the <body> of your page, you will see that even Chrome indeed wipes out everything else except what the document.write is doing.

    Example.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    		
    	function print () {
    		document.write("Words ");
    	}
    
    	setInterval("print()", 1000);
    	
    </script>
    </head>
    <body>
    Here is the body.  It will be wiped out by the first write.  Yes, even with Chrome.
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    print() is a native global in chrome and others...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by rnd me View Post
    print() is a native global in chrome and others...
    As you say, the window.print() method is supported in all major browsers. So a function named print() will clash with it.

    You avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.
    And of course you may not give a variable a name which is a Javascript keyword or event such as alert, case, char, confirm, false, int, null, onload, return, this, void, and so on.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Teh other thing wrong with the original code is that it is passing a string as the first parameter to the setInterval where that function expects to be passed a function as the first parameter. This means that it has to convert the string to a function every time it needs to use it. Since the string contains a function call anyway it is easy to do away with the conversion simply by recoding it as

    setInterval(print, 1000);
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by felgall View Post
    Teh other thing wrong with the original code is that it is passing a string as the first parameter to the setInterval where that function expects to be passed a function as the first parameter. This means that it has to convert the string to a function every time it needs to use it. Since the string contains a function call anyway it is easy to do away with the conversion simply by recoding it as

    setInterval(print, 1000);
    Was this not necessary in old versions of IE? <IE5? But the habit dies hard!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    I certainly learned it first as you-must-use-a-string, but who knows whether we were taught wrong or it was really necessary. I don't have MSIE 5 or so to play with any more.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by felgall View Post
    Teh other thing wrong with the original code is that it is passing a string as the first parameter to the setInterval where that function expects to be passed a function as the first parameter. This means that it has to convert the string to a function every time it needs to use it. Since the string contains a function call anyway it is easy to do away with the conversion simply by recoding it as

    setInterval(print, 1000);
    Was this not necessary in old versions of IE? <IE5? But the habit dies hard!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •