innerHTML Cannot Be Set

Question

Why is the text in the div not changed? What did I do wrong here?

Here's the HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <div id="demo">Text to be changed.</div>
</body>
</html>

And the Javascript:

document.getElementById("demo").innerHTML = "Hello World";

Thank you in advance.

Isn't there a canonical for this billions-times-asked question ? — Kaiido, Aug 17 '17 at 02:48
Possible duplicate of [Javascript getElementById null error](https://stackoverflow.com/questions/12029196/javascript-getelementbyid-null-error) or maybe https://stackoverflow.com/questions/11810874/how-to-get-an-input-text-value-in-javascript/11811079 — Kaiido, Aug 17 '17 at 02:49

score 1 · Accepted Answer · answered Aug 17 '17 at 02:36

1

You need to put the tag at the bottom. Or after the div. When the script is loaded as you have it now, the DOM is not yet ready. So if you run the script after the DOM has been initialized, you'll be fine. So put

 <script src="script.js"></script>

Just before </body>

answered Aug 17 '17 at 02:36

ishegg

9,685
3
16
31

1

This answer answers the question directly without the use of a third party library, script should be placed prior to closing body tag – Dan D Aug 17 '17 at 02:38

score 0 · Answer 2 · answered Aug 17 '17 at 02:35

0

Your script is runing before your document is finished loading, so you may need to wait for onload. With jQuery you'd do this:

$(function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Or more succinctly:

$(function() {
  $("#demo").html("Hello World");
});

answered Aug 17 '17 at 02:35

tadman

208,517
23
234
262

That's a shortcut for `$(document).on('ready'`, right? – ryanpcmcquen Aug 17 '17 at 02:39
3

I'm sure you're right about the cause, but [*"Unless another tag for a framework/library is also included, a pure JavaScript answer is expected."*](https://stackoverflow.com/tags/javascript/info). – nnnnnn Aug 17 '17 at 02:41
@nnnnnn Sadly a lot of people don't know about tools like that, and they never will if nobody ever brings them up. – tadman Aug 17 '17 at 03:40
1

There's nothing wrong with mentioning it in a comment, or as a secondary solution in an answer. My point was that suggesting it as the only solution does go against the guidance given in the "javascript" tag description. (Also, including an entire third-party library just to get the same effect that moving the script to the end of the body would give is overkill.) – nnnnnn Aug 17 '17 at 03:45

score 0 · Answer 3 · answered Aug 17 '17 at 02:38

You need to wrap your JavaScript with a listener for the DOM being ready:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("demo").innerHTML = "Hello World";
});

It's firing too early at the moment.

https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded

score 0 · Answer 4 · answered Aug 17 '17 at 02:50

0

this is working

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    document.getElementById('demo').innerHTML = 'Hello World';
    });
</script>
</head>
<body>
    <div id="demo">Text to be changed.</div>
</body>
</html>

answered Aug 17 '17 at 02:50

ph1409

113
1
7

Including a third-party library just to add a DOM ready handler is overkill, isn't it? – nnnnnn Aug 17 '17 at 03:42

innerHTML Cannot Be Set

4 Answers4