# P5.dom 4.0 bug, example does not work

**URL:** <https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566>\
**Category:** Development\
**Created:** [August 12, 2018, 6:56am UTC](https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566 "2018-08-12T06:56:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mirzababaei](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@mirzababaei](https://discourse.processing.org/u/mirzababaei)\
**Post date:** [August 12, 2018, 6:56am UTC](https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566/1 "2018-08-12T06:56:29Z")

</div>

hi  
[https://p5js.org/examples/dom-input-and-button.html](https://p5js.org/examples/dom-input-and-button.html) does not work after recent version update.

---

<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:** [August 12, 2018, 8:04am UTC](https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566/2 "2018-08-12T08:04:48Z")

</div>

Latest working p5js version: 0.6.1

> <https://github.com/processing/p5.js/blob/0.6.1/src/core/p5.Element.js#L232-L236>

1st buggy p5js version: 0.7.0

> <https://github.com/processing/p5.js/blob/0.7.0/src/core/p5.Element.js#L234-L247>

Issue: Method p5.Element::**mousePressed()** from p5js v0.7.0 expects property _\_pInst_ to point to an instance of p5. However, it’s still `undefined`!

This is the function which would be responsible to instantiate a p5.Element:

> <https://github.com/processing/p5.js/blob/0.7.0/lib/addons/p5.dom.js#L248-L254>

But as we can see @ `var c = media ? new p5.MediaElement(elt) : new p5.Element(elt);`, the parameter _pInst_ is never used to instantiate p5.Element, just the _elt_ is passed to it!

My proposed fix:  
`const c = media? new p5.MediaElement(elt, pInst) : new p5.Element(elt, pInst);`

P.S.: The included statement `return fxn();` inside method p5.Element::**mousePressed()** from p5js v0.7.0 isn’t passing the parameter _event_ to the **fxn()** callback parameter! 😔

In order for our callback function to be as complete as it was in the older p5js v0.6.1, that `return fxn();` should be instead `return fxn.call(this, event);`. 🧐

---

<div class="post-metadata">

**Author:** ![mirzababaei](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@mirzababaei](https://discourse.processing.org/u/mirzababaei)\
**Post date:** [August 12, 2018, 3:17pm UTC](https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566/3 "2018-08-12T15:17:23Z")

</div>

Do you have any recommendation on the following example (from the [P5js.org](http://P5js.org)) to work with new P5.dom?

[https://p5js.org/reference/#/p5/createButton](https://p5js.org/reference/#/p5/createButton) :

```auto
var button;
function setup() {
  createCanvas(100, 100);
  background(0);
  button = createButton('click me');
  button.position(19, 19);
  button.mousePressed(changeBG);
}

function changeBG() {
  var val = random(255);
  background(val);
}

```

---

<div class="post-metadata">

**Author:** ![mirzababaei](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@mirzababaei](https://discourse.processing.org/u/mirzababaei)\
**Post date:** [August 12, 2018, 3:18pm UTC](https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566/4 "2018-08-12T15:18:02Z")

</div>

thank you very much for your response

---

<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:** [August 12, 2018, 3:53pm UTC](https://discourse.processing.org/t/p5-dom-4-0-bug-example-does-not-work/2566/5 "2018-08-12T15:53:47Z")

</div>

> <https://github.com/processing/p5.js/issues/3141>