CODEWITHSUNDEEP
javascriptjquery
Babak Khoramdin
Babak Khoramdin

Reputation: 117

How functions get invoked in this code?

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?

Upvotes: 0

Views: 83

Answers (5)

James Montagne
James Montagne

Reputation: 78740

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.

Upvotes: 1

Slevin
Slevin

Reputation: 4232

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>

Upvotes: 1

Tony Payne
Tony Payne

Reputation: 382

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.

Upvotes: 2

Lix
Lix

Reputation: 48006

$(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.

Upvotes: 0

sshet
sshet

Reputation: 1160

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();
});

Upvotes: 0

Related Questions