22

ok im new at javascript, but im trying to change the innerhtml of a div tag, heres my script and its 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 its not, any help?

Charles Sprayberry
  • 7,632
  • 2
  • 39
  • 49
David
  • 2,275
  • 7
  • 33
  • 58
  • 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

25

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
  • 216
  • 5
  • 12
Aistina
  • 12,095
  • 12
  • 67
  • 87
  • 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. –  May 05 '10 at 15:44
6

correct:

window.onload = var1;

in your example value of window.onload is undefined because function var1 returns nothing (undefined). You should set onload property to function var1, not result of calling function var1()

Anatoliy
  • 28,429
  • 5
  • 43
  • 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
6

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

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,350
  • 31
  • 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,723
  • 2
  • 29
  • 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
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();

pdavis
  • 3,154
  • 1
  • 28
  • 31
0

Try changing onLoad to onload.

function var1() {
  document.getElementById('test').innerHTML = 'hi';
}
window.onload = var1; // onload
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