# Custom button class that can call given function
**URL:** https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670
**Category:** Coding Questions
**Created:** [August 10, 2021, 7:29pm UTC](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670 "2021-08-10T19:29:32Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Sayochi](https://discourse.processing.org/u/Sayochi)
#### Post date: [August 10, 2021, 7:29pm UTC](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670/1 "2021-08-10T19:29:32Z")
Im trying to make a custom buttons for fun. i want to be able to give him functions and run the functions when I click it. I already completed the clicking detection part. how can I somehow pass the function information and make it call the function?
there is smth like `Button.mousePressed(functionA);` for actual button objects.
how can I achieve something like this on my own?
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [August 10, 2021, 8:12pm UTC](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670/2 "2021-08-10T20:12:02Z")
It would be easier to give you advice if you shared your code. However here is some basic information about functions in javascript.
A function in javascript, whether it is declared with a [function statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) or with an [arrow expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), is just an Object of type Function. As such you can pass a function to another function, store it in a variable, add it to an array, or anything else you can do with a value in JavaScript. Regardless of how the function object is stored, you can invoke it using the normal syntax (i.e. follow a reference to the value by parentheses), or you can invoke it using the `call` or `apply` functions on the Function instance. Here are some examples:
```auto
var foo = () => "foo";
function bar() {
return "bar";
}
function logCallback(fn) {
console.log(fn());
}
logCallback(foo); // prints "foo" to the console
logCallback(bar); // prints "bar" to the console
// Here's a more complex example with a class:
class LogAllCallbacks {
callbacks = [];
addCallback(cb) {
this.callbacks.push(cb);
}
logAll() {
for (const cb of this.callbacks) {
console.log(cb());
}
}
}
let test = new LogAllCallbacks();
test.addCallback(foo);
test.addCallback(bar);
test.logAll() // prints "foo" and "bar" to the console.
```
One thing to be aware of is that with functions declared with a function statement, the meaning of the `this` keyword inside that function changes depending on how you invoke it. By default `this` is bound to whatever object is to the left of the `.` when the function is stored on an object and invoked with the `.fn()` syntax. For example:
```auto
function logCallback(fn) {
let example = { callback: fn };
// when fn() is executed, "this" will be bound to the example object
console.log(example.fn());
}
```
So if you use `this` in your function body, and then you pass that function as a callback, you should call `bind(this)` when you do so to prevent changes in the meaning of `this`:
```auto
logCallback(this.myFunction.bind(this));
```
---
### Author:  [@Sayochi](https://discourse.processing.org/u/Sayochi)
#### Post date: [August 11, 2021, 10:51am UTC](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670/3 "2021-08-11T10:51:33Z")
this is definitely working. but I have a small problem about passing arguments along with function.
[this is my current project link. very messy but idk](https://editor.p5js.org/rt.sayochi/sketches/qsTrCqQkB)
i have a small function
```auto
function doThis(situation){
print(situation);
}
```
but when I try to save this to a veriable/container like this `doThis("hello")`… i think it executes the function right there. so i get an “not a function” error afterwards.
(I dont want to return the output. i want to be able to do anything with that function. not just return value then pass it to another specific function)
how can I save the function with arguments so I can execute it when I press the button?
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [August 11, 2021, 8:02pm UTC](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670/4 "2021-08-11T20:02:27Z")
There are two ways to make a function that already has arguments specified.
1. Use Bind: `doThis.bind(null, "hello")`
- The first argument to bind specified what `this` should be bound to
- The remaining arguments are passed to the function when it is called.
- If the caller passes more arguments to the function returned from `bind()` then those arguments will be passed as additional arguments after the ones from `bind()`. In functional programming this is called “partial application.”
2. Use an arrow function expression: `() => doThis("hello")`
- This basically creates a new function that takes a different set of arguments and invokes the original function.
- This is especially useful if you need to actually take some parameters and control the order they are passed to your actual function.