How to use onclick with a function expression rather than a declared function?

Question

I have a button

var startButton = $('#startButton').get(0);

that I attach the vanilla javascript onclick method to the button and call start on click.

startButton.onclick = start;

I want to use a function expression but (due to hoisting?) this doesn't call start

var start = function() {
  console.log('requesting local stream');
  startButton.disabled = true;
  getUserMedia(constraints, gotStreamSuccess, errorCallback);
}

A declared function does

function start() {
  console.log('requesting local stream');
  startButton.disabled = true;
  getUserMedia(constraints, gotStreamSuccess, errorCallback);
}

How can I write

startButton.onclick = start;

so that it works with a function expression?

Thanks

Hey Will, don't forget to mark an answer. :-)

Adam
– Adam

2014-12-28 21:46:00 +00:00
Commented Dec 28, 2014 at 21:46 — Adam
– Adam, Commented Dec 28, 2014 at 21:46

Adam · Accepted Answer · 2014-12-18 21:55:07Z

2

I would agree with you that it's a hoisting issue, you'll have to look within your code to hoist it appropriately before setting startButton.onclick = start;.

Here's what MDN has to say about the syntax: Syntax for on click

It specifically mentions that the function can either be declared or expressed. Which, to me, leads again to the hoising, because function declarations are automatically hoisted.

The MDN for onclick uses a function declaration. I changed the example in this JSFiddle to use a function expression, as you would like to use. With proper hoisting, it is calling the correct method when you click the button.

answered Dec 18, 2014 at 21:55

Adam

2,1071 gold badge17 silver badges27 bronze badges

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

1 Comment

javascriptttt Over a year ago

Thanks Adam - looks very much like declared is the best way to go on this

rhino · Accepted Answer · 2014-12-18 22:18:16Z

Judging by the description of your problem, it seems that you declare (and define) start after assigning it to startButton.onclick. In such case, startButton.onclick will indeed be undefined.

What is hoisted is the variable itself - your code knows it has been declared, but doesn't yet know its value, as the assignment takes place exactly where you have it in the code. Think of it this way: when you use the var keyword, you declare a variable, which, however, is not yet defined. If you happen to immediately assign a value to it, the new value is not visible to the code above the assignment.

Consider the following example:

var a = 1;
console.log(a);
var a = 2;
var a = 3;

Which one of the three values would you expect to be logged in the console? 1, 2 or 3?
You can use var for a single identifier as many times as you want (though I would not recommend it); consecutive declarations are simply ignored, only the assignments are taken into account. Because of that, an assignment cannot be hoisted.

Function declarations, however, are finite in some sense, they can be hoisted in their entirety and that is the reason why using a function declaration worked in your case.

To solve the problem, you could indeed use a function declaration, or perform the variable assignment before startButton.onclick = start; (and I think you don't really need a variable in this particular case, a function declaration is perfectly suitable for this task).

Note that you could also do:

startButton.onclick = function() { // I'm a function expression too!
    // do something here
}

Rigotti · Accepted Answer · 2014-12-18 22:25:18Z

0

The event attachment must occur after the creation of the function expression.

Checkout about this example

<button id="click">Click</button>
<button id="click2">Click2</button>

$(function(){

  var startButton = $("#click").get(0);
  var startButton2 = $("#click2").get(0);

  startButton.onclick = clickFunc; // wont work

  var clickFunc = function() {
    alert('click');
  };

  startButton2.onclick = clickFunc; // work
});

edited Dec 18, 2014 at 22:25

answered Dec 18, 2014 at 22:19

Rigotti

2,8821 gold badge27 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to use onclick with a function expression rather than a declared function?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related