P5.dom 4.0 bug, example does not work

p5.js Development
1

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

2

Latest working p5js version: 0.6.1

1st buggy p5js version: 0.7.0

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:

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! :pensive:

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);. :face_with_monocle:

3

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

https://p5js.org/reference/#/p5/createButton :

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);
}
4

thank you very much for your response

5