# mousePressed() callback function inside object

**URL:** <https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753>\
**Category:** Coding Questions\
**Created:** [February 12, 2021, 2:27am UTC](https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753 "2021-02-12T02:27:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jasonhallen](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@jasonhallen](https://discourse.processing.org/u/jasonhallen)\
**Post date:** [February 12, 2021, 2:27am UTC](https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753/1 "2021-02-12T02:27:49Z")

</div>

Hi everyone,

I started learning p5.js a couple weeks ago and have been working on my first big project. I’m having a hard time troubleshooting an issue involving `mousePressed()` used inside of an object. Here’s a simplified version of my code. This first version works fine. An image (which I’m using as a button) is created inside the `ExampleObject`. When the image is clicked on, the `testCallback()` function prints “Success” to the console. Great!

```auto
function setup() {
  ...
}

function draw() {
  ...
}

function testCallback() {
  console.log("SUCCESS!");
}

function ExampleObject() {
  this.button = createImg('test.png', "Play");
  this.button.mousePressed(testCallback);
}

```

However, I want the callback function to be defined inside the object like this:

```auto
function setup() {
  ...
}

function draw() {
  ...
}

function ExampleObject() {
  this.button = createImg('test.png', "Test");
  this.button.mousePressed(this.internalCallback);

  this.internalCallback = function() {
    console.log("SUCCESS!");
  }
}

```

This second version doesn’t work though. The console prints this error:

```auto
Uncaught TypeError: fxn is undefined

eventPrependedFxn http://127.0.0.1:5500/p5.js:52063

[p5.js:52063:15](http://127.0.0.1:5500/p5.js)

eventPrependedFxn http://127.0.0.1:5500/p5.js:52063

eventPrependedFxn self-hosted:844

```

Can someone please explain the mistake I’m making?

Thanks!  
Jason

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 12, 2021, 2:45am UTC](https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753/2 "2021-02-12T02:45:58Z")

</div>

> [@jasonhallen](#):
>
> ```auto
> function ExampleObject() {
> this.button = createImg('test.png', "Test");
> this.button.mousePressed(this.internalCallback);
> 
> this.internalCallback = function() {
> console.log("SUCCESS!");
> }
> }
> 
> ```

```auto
function ExampleObject() {
  this.button = createImg('test.png', "Test");

  this.internalCallback = function() {
    console.log("SUCCESS!");
  }

  this.button.mousePressed(this.internalCallback);
}

```

---

<div class="post-metadata">

**Author:** ![jasonhallen](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@jasonhallen](https://discourse.processing.org/u/jasonhallen)\
**Post date:** [February 12, 2021, 2:56am UTC](https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753/3 "2021-02-12T02:56:45Z")

</div>

Thanks for the suggestion, GoToLoop. I tried moving the function definition above the `mousePressed()` event as you suggested, but it still isn’t working. The console now prints this error:

```auto
Uncaught TypeError: this.play_button is undefined
    play_pause http://127.0.0.1:5500/sketch.js:143
    eventPrependedFxn http://127.0.0.1:5500/p5.js:52063

```

Here’s the actual code in case it helps:

```auto
function Track(track_number) {
  this.width = 1200;
  this.height = 200;
  this.x_position = 210;
  this.y_position = 10 + this.height * track_number;
  this.sample = sample_list[track_number];
  this.isPlaying = false;
  this.play_button = createImg('play.png', "Play");
  this.play_button.size(70, 70);
  this.play_button.position(70, 60);
  this.play_pause = function() {
    if (this.isPlaying === false) {
      csound.audioContext.resume();
      this.isPlaying = true;
      csound.readScore("i 1 0 -1");
      this.play_button.attribute('src', 'pause.png');
    } else {
      this.isPlaying = false;
      csound.readScore("i -1 0 1");
      this.play_button.attribute('src', 'play.png');
    }
  }
  this.play_button.mousePressed(this.play_pause);

  ...

}

```

Any other ideas? I’m wondering if `mousePressed()` somehow separates the callback function from its context within the object so that p5.js doesn’t know what `this` refers to.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 12, 2021, 3:17am UTC](https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753/4 "2021-02-12T03:17:32Z")

</div>

> [@jasonhallen](#):
>
> `this.play_pause = function() {`

`this.play_pause = () => {`

> **[Arrow function expressions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)**
>
> An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

---

<div class="post-metadata">

**Author:** ![jasonhallen](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@jasonhallen](https://discourse.processing.org/u/jasonhallen)\
**Post date:** [February 12, 2021, 3:44am UTC](https://discourse.processing.org/t/mousepressed-callback-function-inside-object/27753/5 "2021-02-12T03:44:32Z")

</div>

Thank you! That did the trick. I really appreciate your help.

Jason