CODEWITHSUNDEEP
javascripthtml
Ashish
Ashish

Reputation: 14707

Why javascript is not loading for document.readyState==="complete"

I have just started learning javascript from w3school and I have found out that "You can only use document.write in the HTML output. If you use it after the document has loaded, the whole document will be overwritten." so I have tried to write following code to check the validity: 

<html>
    <head>
        <title>ashish javascript learning</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <p> sample html with javascript </p>
        <script>
            document.write("<h1>this is heading</h1>");
            document.write("<p>this is sample para</p>");
        </script>
        <script>
            if(document.readyState === "complete"){
                loaded();
            }
            function loaded(){
                document.write("<p>loading content after the document has been loaded");
            }
        </script>
    </body>
</html>

Code is still showing the old value and is not overwriting the content of the web page. Could you suggest me what am I doing wrongly.

Upvotes: 10

Views: 41780

Answers (4)

dawn
dawn

Reputation: 1

write like this ,you will get the result you want

document.onreadystatechange = function(){
   if(document.readyState == 'complete'){
      document.write('document is overwrite')
   }
}

When the code executes on the JavaScript the dom is not completed, so the document's readyState is not 'complete', then the initApplication function will not be called. If you want to call the initApplication function, you have to add a trigger to the document. I add a trigger like 'document.onreadystatechange'."document.onreadystatechange" will be called when the document's state is changed. When the document is loaded, the "document.onreadystatechange" will be called.

Upvotes: 0

user229044
user229044

Reputation: 239302

At the time you're testing document.readyState === "complete", the document's readyState isn't "complete", it "loading", so nothing happens, and loaded is never called.

You can listen for the readyState to change, and then check to see if it is "complete" (or listen to window.onload which is easier):

document.addEventListener('readystatechange', e => {
  if(document.readyState === "complete"){
    loaded();
  }
});

Upvotes: 18

Joseph
Joseph

Reputation: 119847

What you need to do is hook a function to the readystatechange event then check for the readystate value.

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        initApplication();
    }
}

Upvotes: 4

flavian
flavian

Reputation: 28511

Because the mechanism is event based. You should only ever use that once the DOM is actually loaded, so it's pointless.

The evaluation is done in place, but at the time of the evaluation document.readyState == "complete" is false, so nothing happens.

The simple way to do things:

window.onload = function() {
    loaded();
};

Upvotes: 5

Related Questions