mousePressed not working with P5.Dom button creation

p5.js
1

Hi! I just started using the newest version of p5.js and p5.dom.js, and the mousePressed() method throws an error when a DOM button is clicked. Here is my code:

var button;

function setup(){
noCanvas();
    button = createButton(" ");
    button.addClass("button button-primary button-border-thick button-box");
    button.mousePressed(logPress);
}

function draw(){


}

function logPress(){
console.log("Boing");
}

When the button is clicked, the console gives this error message:

Uncaught TypeError: Cannot read property ‘_setProperty’ of undefined
at g.Element. (p5.min.js:7)
(anonymous) @ p5.min.js:7

I was using version 0.7.1 of both p5.js and p5.dom.js, but when I switched p5 back to version 0.6.1, this worked perfectly. Has anyone else encountered this issue??

edit: Here is my index.html code as well

<!-- Buttons core css -->
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>

    </head>
<style>
    body {
    background-color: #FFFF00 
}


</style>
<body>
    <script src="code.js"></script>
    </body> 
<link rel="stylesheet" href="css/buttons.css">
</html>
2

I did a little bit of reading around and I found this. Seems like it has something to do with the version that you are using? I also can assume that it will be fixed sooner or later. I personally do not know much about p5, and how you could work around this issue, but I do know that in general you could make a button with HTML, and then use JavaScript and the onclick() function to do something similar?

Hopefully this helps,
EnhancedLoop7

3

Thank so much for pointing me to this. Looks like they’re fixing it for the next release ASAP. Thanks for the reminder on the onclick() function as well!

4

It’s no problem! Glad I could help :smiley:

EnhancedLoop7