# P5.js: How to use a function as an object parameter

**URL:** <https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753>\
**Category:** Coding Questions\
**Created:** [October 17, 2019, 1:59am UTC](https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753 "2019-10-17T01:59:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pickle\_Butter](https://avatars.discourse-cdn.com/v4/letter/p/e9a140/32.png) [@Pickle\_Butter](https://discourse.processing.org/u/Pickle_Butter)\
**Post date:** [October 17, 2019, 1:59am UTC](https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753/1 "2019-10-17T01:59:11Z")

</div>

I want to make a button object in p5.js. To do this, I would need to use the button’s function as a parameter in the constructor. I tried using this as the constructor:

```auto
constructor(ixp, iyp, iw, ih, itext, icolor1, icolor2, ido) {
    this.w=iw; // button width
    this.h=ih; // button height
    this.posX=ixp; // button x postion
    this.posY=iyp; // button y position
    this.text=itext; // button label
    this.color1=icolor1; // button default color
    this.color2=icolor2; // button color when under mouse
    this.do=ido; // button function
  }

```

with this instance:

```auto
b1 = new Button(100,100,80,30,"play",'rgb(0,255,0)','rgb(0,200,0)',function(){background(255,0,255);});

```

I was able to do something similar in processing.js, but I can’t get the function to work in p5.js.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 17, 2019, 2:48am UTC](https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753/2 "2019-10-17T02:48:25Z")

</div>

please post code by pasting it into the

```auto
</> Preformatted text

```

button what give you like  
```  
type or paste code here  
```

* * *

we can not see where you execute that function,  
also would be nice to have a test environment with running code / show  
instead we have to make it again just to try / test / play

like [https://editor.p5js.org/kll/sketches/ZJQtqSdAj](https://editor.p5js.org/kll/sketches/ZJQtqSdAj)

* * *

but the idea is great and works as you can see there,  
still can not think of a reasonable use as the function is ‘fixed’ at declaration,  
you could just add it to the class ( or child class )

---

<div class="post-metadata">

**Author:** ![Pickle\_Butter](https://avatars.discourse-cdn.com/v4/letter/p/e9a140/32.png) [@Pickle\_Butter](https://discourse.processing.org/u/Pickle_Butter)\
**Post date:** [October 17, 2019, 3:16am UTC](https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753/3 "2019-10-17T03:16:44Z")

</div>

[https://editor.p5js.org/xander.h.wright/sketches/8QbdGNqTG](https://editor.p5js.org/xander.h.wright/sketches/8QbdGNqTG)  
The intention of the current button is to change the background while the button is pressed.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 17, 2019, 4:57am UTC](https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753/4 "2019-10-17T04:57:19Z")

</div>

did you mean

```auto
  b1.handleClick();

```

not

```auto
  mousePressed=function(){
    b1.handleclick;
  }

```

* * *

or check my link again

* * *

and you still did not repair your posted code above

---

<div class="post-metadata">

**Author:** ![Pickle\_Butter](https://avatars.discourse-cdn.com/v4/letter/p/e9a140/32.png) [@Pickle\_Butter](https://discourse.processing.org/u/Pickle_Butter)\
**Post date:** [October 17, 2019, 4:04pm UTC](https://discourse.processing.org/t/p5-js-how-to-use-a-function-as-an-object-parameter/14753/5 "2019-10-17T16:04:44Z")

</div>

Okay, got it. Thank you.