How functions get invoked in this code?

Question

I can't understand the order of execution takes place here:

 <script>
  $(function(){
    function f(id){
       document.body.innerHTML  += "<p>executing handler for div " + id + "</p>";
    }

    document.getElementById("div1").onclick = function(){
      f("1");
    }

    document.getElementById("div2").onclick = function(){
      f("2");
    }

    document.getElementById("div3").onclick = function(){ 
      f("3");
    }
  });
</script>

What I want to know is how the 'function' and 'f' are called? Is it like when someone click on 'div' then function gets invoked? If it is so, why the function is on the right side of "=" operator?

`onclick` is a property of the DOM object containing the function which gets invoked when the click event happens. I'm not really sure where the confusion lies here. — Rory McCrossan, May 01 '14 at 14:49
http://stackoverflow.com/questions/1140089/how-does-an-anonymous-function-in-javascript-work — Mister Epic, May 01 '14 at 14:49

score 2 · Accepted Answer · edited May 01 '14 at 15:02

2

When someone clicks on div1 the onclick method triggers function f with a passed value of 1. Ditto when div2/3 are clicked on, f is called with those values.

All f does is change the content of the page to show a message.

I'm not sure why this is using document.body.innerHTML though, I would normally expect to see a div that shows a message, such as document.getElementById('message').innerHTML.

I have a feeling (without checking) that document.body.innerHTML will change the whole content of the page to the value that f outputs. I doubt that is the desired result.

edited May 01 '14 at 15:02

James Montagne

77,516
14
110
130

answered May 01 '14 at 14:56

Tony Payne

382
2
10

So this is completely opposite to the other programming languages like C or Java... 'onClick' on the left side triggers the function. Is it right? – Babak Khoramdin May 01 '14 at 15:09
@JamesMontagne Thanks for the edit. Big improvement. – Tony Payne May 01 '14 at 15:11

score 1 · Answer 2 · answered May 01 '14 at 15:05

Explained in comments, line by line:

 <script>

  // this is a jQuery shorthand for $(document).ready. That means, that this function is executed automatically, when the DOM is ready
  $(function(){

    // declaration of a function that will be executed when it's called from somewhere. 'id' is an argument that can be passed
    function f(id){
       document.body.innerHTML  += "<p>executing handler for div " + id + "</p>";
    }

    // 'onclick' is an event handler. When you click the div container with the id 'div1', then the function, set after '=', gets executed
    document.getElementById("div1").onclick = function(){

      // call the function that you declared above with the argument "1"
      f("1");
    }

    document.getElementById("div2").onclick = function(){
      f("2");
    }

    document.getElementById("div3").onclick = function(){ 
      f("3");
    }
  });
</script>

score 1 · Answer 3 · answered May 01 '14 at 15:07

If I'm understanding you correctly based on your question of "why the function is on the right side of = operator?", your question really related to = function(){ in the following code.

document.getElementById("div1").onclick = function(){
  f("1");
}

What this code is doing is assigning an anonymous function to the onclick property of the div1 element.

When a user clicks on the div1 element, this anonymous function is executed. Within the anonymous function, a call is made to the function f passing the string "1".

The reason the anonymous function is needed is because if you were to exclude this and simply have this:

document.getElementById("div1").onclick = f("1");

Rather than calling the f function when the element is clicked, you would immediately call the f function and set the returned value (undefined) to the onclick property. By wrapping it in an anonymous function, you get the desired effect of calling f with the given parameter when the element is clicked.

score 0 · Answer 4 · answered May 01 '14 at 14:51

0

According to what you have asked

$(function(){

});

gets executed on load of a page

if you want to call function f() you need to call as

$(function(){
f();
});

answered May 01 '14 at 14:51

sshet

1,152
1
6
15

score 0 · Answer 5 · answered May 01 '14 at 14:51

$(function(){...} is the jQuery function for document.ready. This function is executed as soon as all of the DOM is ready. It is a feature of jQuery. You don't call it explicitly - jQuery handles that for you.

The f() function is attached to the click handlers (onclick) that are defined for the three div elements. When they are clicked, they trigger the f() function.

The function is on the right side of an assignment because what the code is actually saying is replace the default onclick function with the one defined.

How functions get invoked in this code?

5 Answers5