6

I am attempting to find a div inside my website by id, but when I call getElementById from window.onload I get a null returned. I have verified that the element I am looking for exists and that it is not sharing an Id with any other element.

The weird part of this is the fact that when I run a console command from chrome's Developer Tools the div is returned as it should be.

I have provided a link to a simplified version on JSFiddle, as well as a brief display of what I am attempting, and would appreciate any input you fine people can provide.

<script>
    var hasElement = document.getElementById('someId');
    alert(hasElement);
</script>
<div id="someId">true</div>

http://jsfiddle.net/ph9Nc/2/

user2543321
  • 63
  • 1
  • 1
  • 3
  • 5
    that is not in a window.onload, also in your fiddle you do `window.onload=urlFinder()` you are setting onload to the return of the urlFinder function and not to the function itself. And your fiddle is already setup to run the javascript entered in the onload event, see the settings on the left side of the jsfiddle site – Patrick Evans Apr 01 '14 at 15:24
  • 5
    `window.onload=urlFinder();` should be `window.onload=urlFinder;` You don't want to *call* the function, you just want to set it. – gen_Eric Apr 01 '14 at 15:25

2 Answers2

6

The problem is that you need to change this:

window.onload=urlFinder();

to this:

window.onload=urlFinder;

Or you can just call your function from right before </body> AFTER the relevant HTML.

You were calling the function immediately and then assigning the return result to window.onload rather than assigning a function reference to window.onload. Remember, anytime you use the (), that means to execute it NOW. Anytime you just assign the function name, that means to assign a reference to the function which can be called by someone at a later time when they choose to apply () to the variable.

Also, your jsFiddle wasn't a valid test because the whole fiddle is set to wait until window.onload fires (in the upper left corner) which may have just served to confuse you more.

Here's a fixed version of your jsFiddle (you also had JS errors in some of the code): http://jsfiddle.net/jfriend00/3H9vu/

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thank you for the fixed fiddle and for enlightening me on how window.onload really functions. It turned out I only needed to call the function in the footer rather than the header for it to work. – user2543321 Apr 01 '14 at 15:50
4

The DOM element you are trying to get does not yet exist

You are trying to get the div before it has been written to the page. The script tag executes immediately unless you explicitly tell it to wait.

You have two options:

Place the script after the HTML

<div id="someId">true</div>
<script>
    var hasElement = document.getElementById('someId');
    alert(hasElement);
</script>

Tell the script to execute on a load event

With basic Javascript...

<script>
window.onload = function(){
    var hasElement = document.getElementById('someId');
    alert(hasElement);
}
</script>
<div id="someId">true</div>

...or with jQuery...

<script>
$(document).ready(function(){
    var hasElement = $('#someId');
    alert(hasElement);
});
</script>
<div id="someId">true</div>

Update:

Alternatively, in most modern browsers, you can use the async or defer attributes on the script tag to avoid the synchronous blocking behavior that is the default.

Regarding the console:

The console will log a reference to the object at its last state, not the state at the time it was called in your script. See this post for an explanation: https://stackoverflow.com/a/7389177/2502532

gfullam
  • 11,531
  • 5
  • 50
  • 64
  • 1
    This actually proved to be what I was looking for. I did still need to run the function on window.onload, but the problem I was having was when it was running the div didn't exist yet. Thank you all for your assistance. – user2543321 Apr 01 '14 at 15:48