Proper way to execute a function from a JavaScript created button?

Question

I'm creating some simple buttons on a web page using Javascript and need to call a function when they are clicked. I've come up with the following example that works based on searching for answers. However, it seems wrong to create a function just to call a function. I wasn't able to successfully directly call the function "click_button" which is elsewhere in the script any other way.

This works:

my_button.onclick = function (){
    click_button(my_button.value);
    }

These don't work:

// This executes on first run, but not when clicked.
my_button.onclick = click_button(my_button.value);
// This doesn't do anything when clicked.
my_button.onclick = "click_button(my_button.value);";

Is the top example the proper way to call a function from a button click in JavaScript?

Thanks for any help.

the first example is the right one and you could also add event listener using this syntax my_button.addEventListener("click", myScript); look at this — Amr Aly
– Amr Aly, Commented Mar 4, 2017 at 0:59
Simply because onclick should be callback(function) to work when triggered / fired. — Allen
– Allen, Commented Mar 4, 2017 at 1:05

Rob Indesteege · Accepted Answer · 2017-03-04 01:02:55Z

2

In the first example, you assign a reference to a function that should be called when the button is clicked. This is correct.

In the second example, you assign the result of the click_button function to the onclick. So when your code is read by the engine, it executes your click_button function and assigns the resulting value to the onclick. So when you click your button, there is no function to execute, just a value.

In the third example you just assign a string to your onclick. This can't work.

So yes the first way is the correct way.

answered Mar 4, 2017 at 1:02

Rob Indesteege

5581 gold badge9 silver badges19 bronze badges

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

Comments

andreyrd · Accepted Answer · 2017-03-04 01:26:52Z

1

Let me start by explaining why your last two examples do not work:

my_button.onclick = click_button(my_button.value);

This will execute the click_button() function right away, and will assign whatever the function returns to my_button.onclick

my_button.onclick = "click_button(my_button.value);";

This just sets the value of my_button.onclick to a string. The button's onclick property is not expecting a string with javascript code inside, and it will not evaluate it in that way.

You can see how the onclick property works here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

The function assigned to onclick will be passed a MouseEvent. Your click_button function takes a value as a parameter, so as of right now you can't simply assign the function itself to onclick like so:

my_button.onclick = click_button // won't be given my_button.value

because the value passed to be will be a MouseEvent, not what you expect.

If you modify the click_button function to not require the value parameter, then you could do something like:

function click_button () {
    // Do stuff using this.value or my_button.value directly
}

my_button.onclick = click_button

Otherwise, if you want to be able to pass my_button.value to the function, you need to wrap it in another function, as you do correctly in the first example.

As @Mikey pointed out in the comments, you can get the value by using this.value inside of the function. The MDN docs state that this will be set to the element within the function.

edited Mar 4, 2017 at 1:26

answered Mar 4, 2017 at 1:02

andreyrd

1,1408 silver badges9 bronze badges

2 Comments

Mikey Over a year ago

Good answer. In your last example, he could also access the value with this.value inside the function.

andreyrd Over a year ago

@Mikey Ooh! Awesome, I didn't realize that. Now I see in the MDN docs it does mention that this will be the element. I'll update my answer.

Collectives™ on Stack Overflow

Proper way to execute a function from a JavaScript created button?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related