Function doesn't run when calling it with added parenthesis (even though it doesn't need parameters)

function, javascript

Solution

I thought to call functions, even if they don't need any parameters, you always add the () to the end of its name.

You thought correctly. But here, you don't want to call the function; you want to tell the browser which function to call when the time comes.

When you add the parentheses, you will call the function, immediately (not on load). The function executes; tries to look up the `body` elements, but there is none loaded yet; so you `body_element` ends up as `undefined`. You look up `childNodes` on `undefined`, and get an error. `window.onload` assignment does not happen.

Even if your function did not throw an error, it would have returned `undefined`, so `window.onload` becomes `undefined`, so nothing happens when the page is finally loaded.

Instead, you need to start thinking that functions are just another kind of value. When you say

function a() {
  // ...
}

it is the same as this:

a = function() {
  // ...
};

(Actually there are differences, important ones, but they're irrelevant for now; look them up when you have the basics down pat). A function is now "contained" in variable `a`. Then you can do this:

var b = a;
b();

and it will work - you're putting whatever was in `a` (your function) into the variable `b`, and then executing it by invoking its new name (since now both `a` and `b` refer to the same function). In the same way, after

window.onload = countBodyChildren;

the `onload` property of the `window` object now contains your function. Browser will then execute whatever is there when the load finishes.

You had a case of premature execution.

Problem

Original source