Lesson 18 Different results

econophil · January 29th, 2013, 02:12 PM

Hi Jeremy.
I think you're saying, on p 174, that the handleonload function at the top of the page should not work if one calls onload = handleonload(); (that is, with the paren at the end).

Yet I'm getting the same result (the alert "Loaded" pops up) whether or not I include the parens with the assignment.

Code:

<!DOCTYPE html >
<html>
<script>
  function handleonload() {
    alert("Loaded");
  }
  onload= handleonload();
</script>
</html>

Am I misunderstanding what you're saying there?

Thanks.

jmcpeak · February 5th, 2013, 10:30 AM

Howdy, econophil.

It looks like the code works because you're executing handleonload(). By adding the () to the end of the function name, you execute that function. And since the page is a very simple page, it's difficult to notice the behavior as incorrect. Here's an example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
  <script>
  function handleOnload() {
    var fooDiv = document.getElementById("foo");
  
    alert(fooDiv === null);
  }
    
    onload = handleOnload();
  </script>
  
  
</head>
<body>
  <div id="foo">Hi!</div>
</body>
</html>

In this example, you'll see true in the alert box. The reason being because handleOnload() executes before the div element exists in the document, and getElementById() returns null if it cannot find the requested element. Now change:

Code:

onload = handleOnload();

to:

Code:

onload = handleOnload;

You'll see false in the alert box--meaning the getElementById() method found the div element.

I created a jsbin with this example, so you can play with it however you like: http://jsbin.com/elaqun/1/edit