getelementbyID on load returns null

Question

I have this simple function that needs to find an element and set its height on load:

function setGround() { 

document.getElementById('content').style.height = '40px';

        } 


document.onload = setGround();

However the function returns "null" on load. Am I missing something obvious? Yes the element with that ID does exist.

Thank you for your help.

score 2 · Accepted Answer · edited Aug 06 '12 at 23:39

2

document.onload = setGround;

Remove the () or the function runs immediately, and then document.onload is set to the return of the function (which in your case is ~~null~~ undefined).

edited Aug 06 '12 at 23:39

RobG

124,520
28
153
188

answered Aug 06 '12 at 21:59

Naftali aka Neal

138,754
36
231
295

Alright it now does not return null, however the height style does not get added to the element :-s. Any idea why? – cmplieger Aug 06 '12 at 22:01
Ask another question. Remember to post your html along with it or else everyone might be alil lost ^_^ @SnippetSpace – Naftali aka Neal Aug 06 '12 at 22:02
1

@SnippetSpace: What type of element is it? Does it have a `block` display? Or is it `inline` like a ``? – Aug 06 '12 at 22:04
Try putting in a console.log, just to make sure that the JS is running, if it is, then you've got an issue with the line that's supposed to set the height – Alex Coleman Aug 06 '12 at 22:05
That line looks resurrected from a seriously ancient tutorial. Use document.ready instead. – JohnMerlino Aug 06 '12 at 22:05
the onload event occurs when all content has been loaded. That would be torture on the user. Use document.ready because ready occurs after the HTML document has been loaded. Note that ready is specific to jQuery, while onload is part of pure javascript. – JohnMerlino Aug 06 '12 at 22:08
@am not i am it is a "section" – cmplieger Aug 06 '12 at 22:08
@SnippetSpace: What browser are you using to test? – Aug 06 '12 at 22:10
@am not i am | All of them. more info: http://stackoverflow.com/questions/11836675/set-height-using-javascript – cmplieger Aug 06 '12 at 22:11
@JohnMerlino:. That's `jQuery(document).ready` not `document.ready`, and it only makes sense to use it if you're already using jQuery. – Aug 06 '12 at 22:11
@amnotiam if you read my above comment, i state that its specific to jquery. Bottom line is that code above is terrible. – JohnMerlino Aug 06 '12 at 22:13
@JohnMerlino: I did read your comment. Once again, that's `jQuery(document).ready`, or `jQuery.fn.ready` or `jQuery.ready` or `jQuery(fn)`. There is no `document.ready` from jQuery or in the native API. ...and no, `onload` is not "terrible". – Aug 06 '12 at 22:14
@amnotiam you dont need to correct the obvious. This is a comment section, not a javascript interpreter. – JohnMerlino Aug 06 '12 at 22:17
1

It's a site to give users accurate and helpful information. Saying *"use document.ready"* is hardly obvious to a beginner. AFAIK, you were trying to refer to `document.onreadystatechange`. – Aug 06 '12 at 22:19
For the record, a function with no return statement returns *undefined*, not null. It is *getElementById* that will return null since the element doesn't exist when the function is called, then attempting access to a property on that will throw an error. – RobG Aug 06 '12 at 23:38

Alex Coleman · Answer 2 · 2012-08-06T22:06:41.383

-3

Ignore this, sorry

Technically when setting .onload, you should set it to a String of the javascript to run, so you should do

document.onload = "setGround()";

This might be your issue, it might just be a minor mistake that doesnt affect it, think it should help though

edited Aug 06 '12 at 22:06

answered Aug 06 '12 at 22:01

Alex Coleman

6,611
1
18
30

1

Eval is one of few JS methods that I will say is like licking Satan 100% of the time. – Erik Reppen Aug 06 '12 at 22:02
[How is eval evil](http://javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval/) @AlexColeman – Naftali aka Neal Aug 06 '12 at 22:04
1

Apart from the fact that it does not work at all: http://jsfiddle.net/GGVNz/ (couldn't get it work with `document.onload`, probably because of jsfiddle, but it should not make a difference). The **DOM property** expects a function, not a string. It works if you assign a function reference. – Felix Kling Aug 06 '12 at 22:05
Hmm. I was looking off here (http://www.w3schools.com/jsref/event_onload.asp) and it said that you should pass it a string; odd. Sorry – Alex Coleman Aug 06 '12 at 22:06
If you were using Ruby, you could use instance_eval and or class_eval, but of course javascript is not ruby, so stay away from eval in js. – JohnMerlino Aug 06 '12 at 22:09
Well there's the security issue (which I didn't used to buy but now understand better - it's about otherwise-limited-use SQL injections being able to do a lot more damage when the attacker passes stuff that will get fed into eval statements for every user) and a potential performance issue (you're creating a new instance of the JavaScript interpreter - I honestly have no idea how bad that is but it sounds like it could get brutal with heavy use). I'm sure there are rare exceptions of good use cases for it but for more day to day stuff I would definitely look for alternatives to eval. – Erik Reppen Aug 06 '12 at 22:35
Also there's building code with code in general being something to exercise healthy caution around. Powerful idea but typically done very poorly. – Erik Reppen Aug 06 '12 at 22:37

getelementbyID on load returns null

2 Answers2