Javascript - Issue while updating value through innerHTML

Question

I was trying to check some of javascript code and I found one thing which I am not able to understand the exact reason. In my html file, I have a div with id called test which dont have any value. Now, I want to update the a text/ sentence inside this div through innerHTML. as it is just for testing purpose I am not using any function/ event. Just adding a to update the value.

<body>
<script type="text/javascript">
    var test_content = "This is new text in my test div";
    document.getElementById("test").innerHTML = test_content;
</script>
<div id="test"></div>
</body>

Now, when I load the page, it showing empty nothing inside the test div but if put the javascript code below the div as in below, then it is showing the value in the variable. (note: I am not using any function nor event, just want to update on page load).

<body>    
<div id="test"></div>
<script type="text/javascript">
    var test_content = "This is new text in my test div";
    document.getElementById("test").innerHTML = test_content;
</script>
</body>

can any one explain me the reason for this? Thanks in advance.

Thanks!
Robin

Danilo Valente · Accepted Answer · 2014-07-16 13:50:22Z

1

That's because the first is executed before the div#test is created, so it currently doesn't exist. That's why is a good practice to either put your script tags at the bottom of the page or wrap them with an window.onload event listener.

<body>    
<script type="text/javascript">
    window.onload = function () {
        var test_content = "This is new text in my test div";
        document.getElementById("test").innerHTML = test_content;
    }
</script>
<div id="test"></div>
</body>

If you are using jQuery, you can also do this:

$(function () {
    var test_content = "This is new text in my test div";
    document.getElementById("test").innerHTML = test_content;
});

And since you seem to be a beginner in JavaScript coding, I recommend you read some articles on MDN, like this one and this one.

answered Jul 16, 2014 at 13:50

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

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

Comments

Katana314 · Accepted Answer · 2014-07-16 13:50:06Z

0

Pretty standard issue. Needs an 'onload' of some sort!

<body>    
<div id="test"></div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      var test_content = "This is new text in my test div";
      document.getElementById("test").innerHTML = test_content;
    });
</script>
</body>

answered Jul 16, 2014 at 13:50

Katana314

8,6052 gold badges31 silver badges36 bronze badges

1 Comment

David Barker Over a year ago

He asked for the reasons for it, this is a correct solution but doesn't actually answer the question.

James · Accepted Answer · 2014-07-16 13:55:03Z

0

The reason this is not happening in the the first instance, is because the DOM element, 'test' has not been created yet.

When you place the script after the div, the element has already been created and hence, the script can execute.

You will need to execute your code once the DOM is ready, by listening for load event dispatched from the body tag. This can be done quite simply using an in-line listener such as <body onload='myFunction'> or by an onload handler in javascript:

body.onload = function() {...}

answered Jul 16, 2014 at 13:55

James

9791 gold badge8 silver badges13 bronze badges

Comments

Liquinaut · Accepted Answer · 2014-07-16 13:56:51Z

0

Javascript is executed at runtime, as soon at it is being called. In your first example, the parser reads the script tag, executes it and then loads the rest of the page (top-to-bottom). As the script is executed before the div is laoded and created, the div will stay empty. That's the reason the onload event was introduced. http://www.w3schools.com/jsref/event_onload.asp

edited Jul 16, 2014 at 13:56

answered Jul 16, 2014 at 13:51

Liquinaut

3,8071 gold badge23 silver badges17 bronze badges

Comments

anni · Accepted Answer · 2014-07-16 14:42:42Z

take one example of jquery you either have to write $(document).ready() or you have to write your jquery code at the last of html code and, both have same meaning i.e when all the html is loaded then do some function. this is same in this case, do some function after all the document content is loaded. take two cases:

case #1:

in this case we have the javascript code written above the html as in your first case which is without any event handler, the html engine will start reading the html code from top to bottom and at the moment it will hit to script tag it will call javascript engine. so according to this javascript code will be executed first.

if you write this line document.getElementById("test").innerHTML = test_content; as :

var x = document.getElementById("test");
x.innerHTML = test_content;

then the console will return null i.e the value of x would benull.because div is still not loaded, therefore the value of div will not change

case #2:

script tag is placed at the last. so now, all the html is loaded by html engines, so now the value of x will be <div id="test"></div> and now all the javascript code will be executed without any error.

as i mentioned earlier about jquery $(document).ready()... well this is a jquery method but this can be written as in javascript as:

<script type="text/javascrip">
var start_script = function(){
// function to be performend
}
</script>
   <body onload="start_script();">
  ......
</body>

because all the event are triggered when all the html is loaded and compiled.

Collectives™ on Stack Overflow

Javascript - Issue while updating value through innerHTML

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related