JavaScript innerHTML not updating element

Question

Here is a very simple program and the output should be JavaScript but I am only getting s.

<html>
    <head>
        <title></title>
        <script type="text/javascript">
          document.getElementById("ma").innerHTML="JavaScript";
        </script>
    </head>
    <body>
        <h1 id="ma">s</h1>
    </body>
</html>

score 46 · Accepted Answer · answered May 31 '12 at 02:36

46

The element doesn't exist at the time you're attempting to set a value. You need to call this after the <h1> has been added to the DOM.

You can either move this <script> tag down further, or add your logic to a function which ought to be called when the document has been loaded:

window.onload = function() {
    /* Add your logic here */
}

Demo: http://jsfiddle.net/Lr2Hm/

answered May 31 '12 at 02:36

Sampson

265,109
74
539
565

2

Worked like a charm for me. Thanks. – mark kasina Oct 18 '16 at 08:37
8

Also make sure there is no typo. `.innerHTML` works and not ` .innerHtml`. – Deke Oct 31 '19 at 14:58

score 14 · Answer 2 · answered May 31 '12 at 02:36

14

You have to wait until the DOM has loaded.

window.onload = function(){
    document.getElementById("ma").innerHTML="JavaScript";
}

answered May 31 '12 at 02:36

Derek 朕會功夫

92,235
44
185
247

score 14 · Answer 3 · answered May 31 '12 at 02:44

14

You have 2 choices:

window.onload = function() {
  //your script here
}

or

<body>
    <h1 id="ma">s</h1>
    <script type='text/javascript'>
        //your script here
    </script>
</body>

answered May 31 '12 at 02:44

Someth Victory

4,492
2
23
27

score 3 · Answer 4 · edited Jan 14 '20 at 21:19

3

The options provided did not work for me. document.querySelector worked for me!

for example:

document.querySelector("#ma").innerHTML = "HELLO";

edited Jan 14 '20 at 21:19

Yunnosch

26,130
9
42
54

answered Jan 14 '20 at 20:57

kaeiris

31
2

Thank you for this! This is what I needed, I have no idea why but this solution solved it for me. – Aaron Meese Feb 01 '22 at 00:07
why does this work and not document.querySelectorAll ? – tiadotdev Mar 03 '22 at 18:53
This worked for me! Simple and efective. – MasterD Mar 22 '23 at 15:53

score 1 · Answer 5 · answered Jun 07 '18 at 09:17

Note that anything you write with element.innerHTML="anything" will replace the actual content of your element. If you want to add more content you have to store everything into a cumulative variable, the actual content of your element too, in order to keep it, then parse this variable into innerHTML when its content is full.

<script type=text/javascript">
var MyFullVar = element.innerHTML + "my new content I want to add";
element.innerHTML = MyFullVar;
</script>

score 1 · Answer 6 · answered Jul 04 '21 at 07:18

1

You can also use the defer keyword with a script to execute it after the DOM has been initialized

<script type=text/javascript" defer>/*Your script here*/</script>

answered Jul 04 '21 at 07:18

Peter Ferencz

74
1
8

score 1 · Answer 7 · answered Dec 25 '21 at 02:03

1

Just put your script tag at the bottom.

<!doctype html>
<html>
<head>
Head Content here...
</head>
<body>
Body Content...
<script>
script function here...
</script>
</body>
</html>

answered Dec 25 '21 at 02:03

fox tech.

65
8

DeadlyDerpYT · Answer 8 · 2019-12-18T15:16:24.597

You could also do this instead...

<script type=text/javascript">
    window.onload = function () {
        var element = document.getElementById('element').innerHTML;
        var content = ".........";
        element.innerHTML += content.toString();
    }
    </script>

According to w3schools and basic JavaScript rules this works. I have also tried this before.

This takes the basis on the onload function to auto run the code at startup. It also takes advantage of the JS Assignment Operators to quickly and efficiently execute the code.

score 0 · Answer 9 · answered Oct 28 '21 at 09:09

0

How about this

function change(){
  document.getElementById("content").innerHTML = "Javascript";
}

<html>
<div>
<p id="content">TypeScript</p>
<button onclick="change()">Change</button>
</div>
</html>

answered Oct 28 '21 at 09:09

Ritvik-Buxi

1
1

This doesn't seems to really answer to the question. Can you [edit] your answer to explain why this will fix the issue ? – Elikill58 Oct 28 '21 at 09:49

score 0 · Answer 10 · answered Apr 22 '22 at 03:06

0

This is what i have found works just link it in the html through the relative address then write the code in the js page

<body>     
 <h1 id="someText"></h1>
 <script src="link external javascript page here"></script>
</body>

in the script.js...

enter code here

//example

var age = prompt('What is your age?');

document.getElementById('someText').innerHTML = 'Hello World, I am ' + age + ' years old';

answered Apr 22 '22 at 03:06

xAtom

1

Hi @xAtom, welcome to Stack Overflow. This question has already great answers that are more to the point. You might want to just add a comment to an existing one. – Andreas Apr 25 '22 at 22:42

JavaScript innerHTML not updating element

10 Answers10

Linked