-3

I want to run the function renews() with interval but want to run first time when the html is opened. so I wrote renews(); but it doesn't work. I could run other function of the code. but only this one doesn't. Thank you for the help!

<html>
    <head>

    <script>

        var i=0;
        var u=0; //0:redy for the next FX
        var newstext;

        function renews() {

            if(i%2==0){
                newstext = "aaa";
            } else {
                newstext = "bbb";
            }
                document.getElementById("news").innerHTML = newstext;
                i++;
        }
        //renews(); // this doesn't work
        setInterval(function(){
        renews();
        },3000);
    </script>
    </head>

    <body>
        <span id ="news">test</span>
    </body>

</html>
haru
  • 315
  • 1
  • 9
  • 4
    What _exactly_ do you mean by "doesn't work?" – Matt Ball Nov 27 '15 at 18:52
  • 1
    Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element). Classical error: the DOM isn’t loaded yet, so you can’t access `document.getElementById("news")`. – Sebastian Simon Nov 27 '15 at 18:53
  • @Xufox that's really not a duplicate question. Dupes are determined by the _question_ not by the _answer._ – Matt Ball Nov 27 '15 at 18:54
  • Try putting your code below the `body` tag, it might mean the DOM elements have not rendered yet – AGE Nov 27 '15 at 18:54
  • Please watch this video: https://www.youtube.com/watch?v=8aGhZQkoFbQ, because you are doing it wrong. – tereško Nov 27 '15 at 19:01

2 Answers2

1

Move your script to the bottom of the body. When you execute your script, the DOM has not been build yet, and thus there is no element to operate on.

tobi
  • 779
  • 8
  • 10
  • the function runs in a timeout. It *may* not be parsed yet, but with such a minimal page it would be a safe bet to assume the element is parsed after the 3 second timeout. – rlemon Nov 27 '15 at 18:58
  • Yes, but as I read the question, the problem is that it won't run _at all_ until after 3 seconds... – tobi Nov 27 '15 at 19:02
  • @rlemon There’s a commented-out line in the question. That’s the line that doesn’t work and at that time the DOM hasn’t loaded yet. – Sebastian Simon Nov 27 '15 at 19:03
  • It works now! Thank you very much everyone. so does it mean If JavaScript was separated file, then I always should put JavaScript loading after main body of html? – haru Nov 27 '15 at 19:09
0

When you’re dealing with the DOM it’s important to execute your code only after the page is fully loaded. If you don’t, there’s a good chance the DOM won’t be created by the time your code executes.

Now Let’s think about what just happened when your code run. you put your js code in the header tag of the page, so it begins executing before the browser even sees the rest of the page. That’s a big problem because that span element with an id of “news” doesn’t exist, yet.

So what happened exactly? The call to getElementById returns null instead of the element you want, causing an error, and the browser, being the good sport that it is, just keeps moving and renders the page anyway, but without the change to the DOM at the first time.

How do you fix this? Well, you could move your code to the bottom of the body, but there’s actually a more foolproof way to make sure this code runs at the right time; a way to tell the browser “run my code after you’ve fully loaded in the page and created the DOM.” Besides moving the code to the bottom of the body, there’s another—and, one might argue—cleaner way to do it with code.

Here’s how it works: first create a function that has the code you’d like executed once the page is fully loaded. After you’ve done that, you take the window object, and assign the function to its onload property. The window object will call any function you’ve assigned to its onload property, but only after the page is fully loaded. Check This out:-

<html>
<head>

<script>

    var i=0;
    var u=0; //0:redy for the next FX
    var newstext;

    function renews() {

        if(i%2==0){
            newstext = "aaa";
        } else {
            newstext = "bbb";
        }
            document.getElementById("news").innerHTML = newstext;
            i++;
    }
    //renews(); // this doesn't work
    window.onload = renews; //But this will work
    setInterval(function(){
    renews();
    },3000);
</script>
</head>

<body>
    <span id ="news">test</span>
</body>

Now even if you put your JavaScript code in a separated JS file and import it in the header tag instead of moving it to the end of the body your code will work just fine.

Arman Bhuiyan
  • 86
  • 7