onclick assigned function with parameters

Question

I'm not sure if this has been asked before because I don't know what it's called.

But why wouldn't a method like this work? Below is just a general example

<script>
document.getElementById('main_div').onclick=clickie(argument1,argument2);

function clickie(parameter1,parameter2){
 //code here
}

</script>

The code above would work fine if the event handler was assigned without parameters, but with parameters, it doesn't work. I think I read online that to overcome this problem, you could use closures. I'm assuming it's because of the parentheses ( ) that is calling the function immediately instead of assigning it to the event?

access the params within the function

jhyap
– jhyap

2014-06-05 02:06:22 +00:00
Commented Jun 5, 2014 at 2:06 — jhyap
– jhyap, Commented Jun 5, 2014 at 2:06

adeneo · Accepted Answer · 2020-06-17 18:09:59Z

28

Because you're calling the function immediately and returning the result, not referencing it.

When adding the parenthesis you call the function and pass the result back to onclick

document.getElementById('main_div').onclick = clickie(); // returns undefined

so it's actually equal to writing

document.getElementById('main_div').onclick = undefined;

which is not what you want, you want

document.getElementById('main_div').onclick = clickie;

but then you can't pass arguments, so to do that you could use an anonymous function as well

document.getElementById('main_div').onclick = function() {
    clickie(argument1,argument2);
}

or use bind

document.getElementById('main_div').onclick = yourFunc.bind(this, [argument1, argument2]);

It is however generally better to use addEventListener to attach event listeners, but the same principle applies, it's either (without arguments)

document.getElementById('main_div').addEventListener('click', clickie, false);

or bind or the anonymous function to pass arguments etc.

document.getElementById('main_div').addEventListener('click', function() {
    clickie(argument1,argument2);
}, false);

edited Jun 17, 2020 at 18:09

answered Jun 5, 2014 at 2:06

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

user3029001 Over a year ago

Thanks! makes a lot of sense now.

Erick Petrucelli Over a year ago

It's wrong to state that you can't pass arguments while assigning a function to an event attribute. Just use bind to do it, as EgorTitov answer correctly shown.

Egor · Accepted Answer · 2017-06-20 10:43:52Z

7

The easiest way is:

yourElement.onclick = yourFunc.bind(this, [arg1, arg2]);

function yourFunc (args, event) {
    // here you can work with you array of the arguments 'args'
}

answered Jun 20, 2017 at 10:43

Egor

2,1922 gold badges23 silver badges26 bronze badges

2 Comments

Burrich Over a year ago

Thanks, i was looking for that ;) My mistake was to put event default argument on first position, before args.

Erick Petrucelli Over a year ago

That's the right answer, since it's completely possible to pass arguments to named functions bound to event attributes with bind.

Martin Konecny · Accepted Answer · 2014-06-05 02:07:35Z

2

When you say onClick = function() {...} you are registering your function with some internal JavaScript library. So when the "click" happens, that library invokes your function.

Now imagine you're the author of that library and someone registered their function with it. How would you know how many parameters to pass to the function? How would you know know what kind of parameters to pass in?

clickie(argument1,argument2)

This means to invoke the function and return its return value.

clickie

This simply is a reference to the function (doesn't invoke/execute it)

answered Jun 5, 2014 at 2:07

Martin Konecny

59.9k20 gold badges144 silver badges159 bronze badges

Comments

lindsay · Accepted Answer · 2014-06-05 02:06:23Z

0

To bind an event to a element, you need to use either the attachEvent or addEventListener method. For example.

/* Non IE*/
document.getElementById('main_div').addEventListener('click', function () {}, false);

/* IE */
document.getElementById('main_div').attachEvent('onclick', function () {});

answered Jun 5, 2014 at 2:06

lindsay

9822 gold badges11 silver badges23 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:09:58Z

A function name followed by parentheses is interpreted as a function call or the start of a function declaration. The a onclick property needs to be set to a function object. A function declaration is a statement, and is not itself a function. It doesn't return a reference to the function. Instead it has the side effect of creating a variable in the global scope that refers to a new function object.

function clickie(param) { return true; }

creates a global variable named clickie that refers to a function object. One could then assign that object as an event handler like so: element.onclick = clickie;. An anonymous function declaration (often confused with a closure; for the difference see Closure vs Anonymous function (difference?)) does return a function object and can be assigned to a property as an event handler, as follows:

element.onclick = function(event) { return true; };

But this doesn't work:

element.onclick = function clickie(event) { return true;};

Why? Because function clickie(event) { return true;} is a statement, not a function. It doesn't return anything. So there is nothing to be assigned to the onclick property. Hope this helps.

cdehaan · Accepted Answer · 2023-06-02 23:36:14Z

0

Many correct answers on an old question, but just to add the modern way to create an anonymous function to do this:

document.getElementById('main_div').onclick = () => {
     clickie(argument1,argument2)
}

answered Jun 2, 2023 at 23:36

cdehaan

5846 silver badges13 bronze badges

Collectives™ on Stack Overflow

onclick assigned function with parameters

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related