25

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?

Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
David
  • 2,365
  • 8
  • 34
  • 59
  • The phrase "not working" covers an awful lot of scenarios. What exactly is the error? – Jonathon Faust Feb 12 '10 at 20:22
  • 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? – David Feb 12 '10 at 20:23

7 Answers7

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.

pyrmont
  • 225
  • 5
  • 12
Aistina
  • 12,435
  • 13
  • 69
  • 89
  • 3
    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. –  May 05 '10 at 15:44
  • make sure it is "HTML" is capitalized – user883992158 Sep 08 '22 at 19:14
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.

U. Windl
  • 3,480
  • 26
  • 54
Anatoliy
  • 29,485
  • 5
  • 46
  • 45
  • 1
    @David: Notice also the change from onLoad to onload. I tried it and it works just fine. – Guffa Feb 12 '10 at 20:25
5

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.

U. Windl
  • 3,480
  • 26
  • 54
3

Below is another simpler version 

<body>
 <div id="test">change</div>
  <script type="text/javascript">
   document.getElementById('test').innerHTML = 'hi';
 </script>
</body>
Ashraf Alam
  • 3,500
  • 32
  • 31
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".

Tim S. Van Haren
  • 8,861
  • 2
  • 30
  • 34
  • 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 – David Feb 12 '10 at 20:16
  • Actually this "answer" should have been a comment as it does not fix the problem(s). – U. Windl Dec 20 '22 at 13:22
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();

U. Windl
  • 3,480
  • 26
  • 54
pdavis
  • 3,212
  • 2
  • 29
  • 31
  • While correct, an answer should also include some explanation (as e.g. https://stackoverflow.com/a/2254829/6607497 does). – U. Windl Dec 20 '22 at 13:24
0

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

function var1() {
  document.getElementById('test').innerHTML = 'hi';
}
window.onload = var1; // onload
Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
johnmdonahue
  • 653
  • 7
  • 16
  • It’s a lot safer to use DOM methods like createElement, createTextNode and appendChild. –  May 05 '10 at 15:44
  • You can check that this will not solve the problem. You execute the function before the onload, which is unintended. – brunoais Oct 29 '12 at 22:23
  • @brunoais updated. the issue I was trying to draw attention to there was the camelCase on onload. – johnmdonahue Nov 13 '12 at 23:54