CODEWITHSUNDEEP
javascriptinnerhtml
Robindra Singha
Robindra Singha

Reputation: 141

Javascript - Issue while updating value through innerHTML

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

Upvotes: 2

Views: 1234

Answers (5)

anni
anni

Reputation: 288

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.

Upvotes: 0

Liquinaut
Liquinaut

Reputation: 3807

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

Upvotes: 0

James
James

Reputation: 979

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() {...}

Upvotes: 0

Danilo Valente
Danilo Valente

Reputation: 11342

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.

Upvotes: 1

Katana314
Katana314

Reputation: 8610

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>

Upvotes: 0

Related Questions