Login/Register
Change `innerHTML` of element using JavaScript
Asked Answered
Solved javascriptinnerhtml
A

7

26

OK, I'm new at JavaScript, but I'm trying to change the innerHTML of a div element. Here is my script that is not working:

<head>
<script type="text/javascript">
function var1() {
document.getElementById('test').innerHTML = 'hi';
}
window.onLoad = var1();
</script>
</head>
<body>
<div id="test">change</div>
</body>

It should work, but for some reason it does not, any help?

Armillia answered 12/2, 2010 at 20:11 Comment(2)
The phrase "not working" covers an awful lot of scenarios. What exactly is the error? – Batory
theres no error, its just not changing the text inside the 'test' div. i just tried and if i put the javascript under the div, it works. is there a way to make it work when above the div as i have shown? – Armillia
F
28

Rather than assigning var1 to window.onload, you're currently calling the function and storing its result. Also, this might be obvious, but var1 seems like an odd name for a function. Try this:

function var1() {
  document.getElementById('text').innerHTML = 'hi';
}

window.onload = var1;

Note the casing of onload, as well as the missing parentheses after var1.

Fantasy answered 12/2, 2010 at 20:24 Comment(2)
you should not use innerHTML it is non-standard and a bad practice. It’s a lot safer to use DOM methods like createElement, createTextNode and appendChild. – Actionable
make sure it is "HTML" is capitalized – Mulvihill
D
6

Correct is:

window.onload = var1;

In your example value of window.onload is undefined, because function call var1() returns nothing (undefined). Instead you should set the onload property to function (pointer) var1.

Dacca answered 12/2, 2010 at 20:16 Comment(1)
@David: Notice also the change from onLoad to onload. I tried it and it works just fine. – Tsaritsyn
A
4

Using .innerHTML is non-standard, and a terrible practice for many reasons. You should create a new element using the proper standard methods and and add it to the tree where you want it.

Actionable answered 12/2, 2010 at 20:29 Comment(4)
No. Using innerHTML is the fastest way. – Teratism
doesn't mean is isn't bad practice – Actionable
It's non standard, therefore it can lead to undefined behaviour, ie: security flaws, thus is bad practice. I can't believe someone voted this down... – Effieeffigy
Just to add some context to the "fastest" comment by Josh S. #18394481 – Facility
D
3

Below is another simpler version 

<body>
 <div id="test">change</div>
  <script type="text/javascript">
   document.getElementById('test').innerHTML = 'hi';
 </script>
</body>
Danieledaniell answered 20/5, 2016 at 7:33 Comment(0)
E
1

You're getting an element with an id of "test", but there is no element with that id in your html. There is, however, one called "text".

Epicenter answered 12/2, 2010 at 20:13 Comment(2)
oh sorry, i fixed that i didnt copy and paste from my text just typed it in here, my bad. but yeh still doesnt work – Armillia
Actually this "answer" should have been a comment as it does not fix the problem(s). – Bangup
H
1

Your example will work if you change the uppercase "L" to a lowercase "L" in "onLoad" and remove the parenthesis after var1 where you currently have window.onLoad = var1();

Hypha answered 12/2, 2010 at 20:32 Comment(1)
While correct, an answer should also include some explanation (as e.g. https://mcmap.net/q/518550/-change-innerhtml-of-element-using-javascript does). – Bangup
C
0

Try changing onLoad to onload and remove the parentheses () after var1:

function var1() {
  document.getElementById('test').innerHTML = 'hi';
}
window.onload = var1; // onload
Checked answered 12/2, 2010 at 20:29 Comment(3)
It’s a lot safer to use DOM methods like createElement, createTextNode and appendChild. – Actionable
You can check that this will not solve the problem. You execute the function before the onload, which is unintended. – Cromorne
@Cromorne updated. the issue I was trying to draw attention to there was the camelCase on onload. – Checked

© 2022 - 2024 — McMap. All rights reserved.