Javascript inline function call

Question

I have a question about inline function call in javascript.

This example works:

<button onclick="{alert($(this).text());}">Testing</button>

While this is not working:

<button onclick="function(){alert($(this).text());}">Testing</button>

My question is - why is the second case not working and the first one does?

I've come accross this issue, using jQuery-UI droppable:

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

Droppable is also using this syntax (without function()). Why is that?

You're making an anonymous function, not calling it.

jdmdevdotnet
– jdmdevdotnet

2017-04-14 17:16:10 +00:00
Commented Apr 14, 2017 at 17:16 — jdmdevdotnet
– jdmdevdotnet, Commented Apr 14, 2017 at 17:16

Derek 朕會功夫 · Accepted Answer · 2017-04-14 16:52:59Z

6

<button onclick="function(){alert($(this).text());}">Testing</button>

That is equivalent to:

yourButton.addEventListener("click", function(){
    function(){
        alert($(this).text());
    };
});

Can you see why it's not working now?

edited Apr 14, 2017 at 16:52

answered Apr 14, 2017 at 16:49

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Monger Over a year ago

Beat me to it. This is the best answer for this situation.

Karl-Johan Sjögren · Accepted Answer · 2017-04-14 17:00:37Z

4

Lets break this down sample by sample

<button onclick="{alert($(this).text());}">Testing</button>

This would be same as doing the following in pure javascript.

document.querySelector('button').addEventListener('click', function() {
  {
    alert($(this).text());
  }
});

It's a bit weird to add extra braces like that but it is fully allowed and the code within will be executed. For your second sample this gets really weird though.

<button onclick="function(){alert($(this).text());}">Testing</button>

This would be the same as this.

document.querySelector('button').addEventListener('click', function() {
  function() {
    alert($(this).text());
  }
});

In other words, when you click on the button you'll declare a new function but you'll never call it. To get around this you would need to wrap it in paranthesis and then call .call(this) on the function to execute with the same this as the caller.

document.querySelector('button').addEventListener('click', function() {
  (function() {
    alert($(this).text());
  }).call(this);
});

Or in your style.

<button onclick="(function(){alert($(this).text());}).call(this)">Testing</button>

edited Apr 14, 2017 at 17:00

answered Apr 14, 2017 at 16:52

Karl-Johan Sjögren

17.8k7 gold badges66 silver badges75 bronze badges

2 Comments

user1106925 Over a year ago

}).bind(this)(); should be rewritten as }).call(this), otherwise you're needlessly creating a new function from the anonymous one before calling it, instead of just calling the anonymous function itself.

Karl-Johan Sjögren Over a year ago

You're right, that would be better. I'll update the sample.

Aravind Sivam · Accepted Answer · 2017-04-14 16:49:30Z

2

example 1

Your passing statement. So it's working.

example 2

Your passing callback function. Javascript onclick doesn't support callback.

About droppable, droppable is a jquery plugin so it will support callback function.

answered Apr 14, 2017 at 16:49

Aravind Sivam

1,0998 silver badges23 bronze badges

Comments

Alexander Nied · Accepted Answer · 2017-04-14 16:50:08Z

Because the brackets are superfluous, and likely being ignored:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="alert($(this).text());">Testing</button>

If you want to encapsulate it in a function and run it as such, I suppose it would need to be self-invoking:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="(function(){alert($(this).text());})();">Testing</button>

But then the this value gets unbound.

The droppable syntax is something completely different-- you can think of it like this:

var configObj = { // this isn't a function, it's a config object
  drop: function( event, ui ) {}  // this is a function value of the property drop
}
$( ".selector" ).droppable(configObj);

Collectives™ on Stack Overflow

Javascript inline function call

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related