Why isn't my function running on document load as expected?

Question

This code should set an elements height; however no style gets added. Am I missing something obvious?

function setGround() { 
    document.getElementById('content').style.height = '40px';
} 

document.onload = setGround;

The HTML is quite basic:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="css/default.css"/>
    <link rel="stylesheet" type="text/css" href="css/orange.css"/>
    <script type="text/javascript" src="javascript/detect-css.js"></script>
</head>

<body>
    <header>
        <div id="logo"></div>
    </header>
    <section id="sidebar"><p>sf </p>
    </section>

    <section id="content"><p>sf </p>
    </section>

</body>
</html>

Thank you for your help!

A very simple solution is to put your script down just before the `
` tag. Then you can just do `setGround()`. — , Aug 06 '12 at 22:22

score 4 · Accepted Answer · answered Aug 06 '12 at 22:12

4

Don't use document.onload use window.onload instead.

See http://jsfiddle.net/mowglisanu/r6NzE/

answered Aug 06 '12 at 22:12

Musa

96,336
17
118
137

This discussion talks about it http://stackoverflow.com/questions/588040/window-onload-vs-document-onload – Techgration Aug 06 '12 at 22:21

score 2 · Answer 2 · answered Aug 06 '12 at 22:21

you can use this:

function setGround() { 
    document.getElementById('content').style.height = '40px';
} 
document.onload = setGround;

but if you want see changes, you should create border on section tag by use this:

<section id="content" style='border:1px solid fuchsia;' >
<p>sf </p>
</section>

score 1 · Answer 3 · answered Jun 24 '14 at 06:26

1

You should use

window.onLoad = setGround;

instead of

document.onload = setGround;

answered Jun 24 '14 at 06:26

IshaniNet

153
10

score 0 · Answer 4 · answered Aug 06 '12 at 22:22

Where have you placed the javascript-code? Is it in the detect-css.js?

This works:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/orange.css"/>
<script language="javascript">
function resize(){
document.getElementById("content").style.height='100px';
}
</script>
</head>

<body onload="resize()">
<header><div id="logo"></div></header>
<section id="sidebar"><p>sf </p>
</section>

<section id="content" style="background-color:#CCC; display:block;"><p>sf </p>
</section>

</body>
</html>

Why isn't my function running on document load as expected?

4 Answers4

Linked