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?
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.
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.
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.
innerHTML is the fastest way.
Below is another simpler version
<body>
<div id="test">change</div>
<script type="text/javascript">
document.getElementById('test').innerHTML = 'hi';
</script>
</body>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".
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();
Try changing onLoad to onload and remove the parentheses () after var1:
function var1() {
document.getElementById('test').innerHTML = 'hi';
}
window.onload = var1; // onload
