# Problem with my button

**URL:** <https://discourse.processing.org/t/problem-with-my-button/20868>\
**Category:** Coding Questions\
**Created:** [May 14, 2020, 2:00pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868 "2020-05-14T14:00:54Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coco5](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Coco5](https://discourse.processing.org/u/Coco5)\
**Post date:** [May 14, 2020, 2:00pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/1 "2020-05-14T14:00:55Z")

</div>

Hi,  
I have a little problem with p5js. My code was working very well until I added a button to save my canvas. I don’t understand why when I add the button in the function setup, it is making my code to crash.

//QUELQUES VARIABLES  
let nbColonnes = 26;  
let nbLignes = 12;  
let largeurCase;  
let hauteurCase;  
let colonneSurvol;  
let ligneSurvol;

//VARIABLES POUR LES PACQUETS  
let pacquet\_1;  
let pacquet\_2;  
let pacquet\_3;  
let pacquet\_4;  
let pacquet\_5;  
let pacquet\_6;  
let pacquet\_7;  
let pacquet\_8;  
let pacquet\_9;  
let pacquet\_10;

//VARIABLE POUR LES BOITES  
let boxes = [];

//VARIABLES POUR LES IMAGES  
let img;  
let cartes = [];

//CHARGEMENT IMAGES  
function preload() {  
//img= loadImage(‘data/carte1.png’)  
for (let i = 0; i \<= 9; i++) {  
cartes[i] = loadImage(‘data/carte’ + i + ‘.png’);  
}  
}

function setup() {  
createCanvas(windowWidth, windowHeight);  
frameRate(20);  
//pixelDensity(1);

```
largeurCase = width / nbColonnes;
hauteurCase = height / nbLignes;

//ON INITIALISE LES PACQUETS
pacquet_1 = new Pacquet('', 640,20, 0);
pacquet_2 = new Pacquet("", 710, 20, 1);
pacquet_3 = new Pacquet("", 780, 20, 2);
pacquet_4 = new Pacquet("", 850, 20, 3);
pacquet_5 = new Pacquet("", 920, 20, 4);
pacquet_6 = new Pacquet("", 990, 20, 5);
pacquet_7 = new Pacquet("", 1060, 20, 6);
pacquet_8 = new Pacquet("", 1130, 20, 7);
pacquet_9 = new Pacquet("", 1200, 20, 8);
pacquet_10 = new Pacquet("", 1270, 20, 9);

removeBtn = createButton("Save Canvas"); 
removeBtn.position(30, 200) 
removeBtn.mousePressed(saveToFile);

```

}

function draw() {  
background(255);  
//DESSIN DE LA GRILLE  
grille();

```
//ON CRÉÉ LES "PACQUETS"
pacquet_1.generate();
pacquet_2.generate();
pacquet_3.generate();
pacquet_4.generate();
pacquet_5.generate();
pacquet_6.generate();
pacquet_7.generate();
pacquet_8.generate();
pacquet_9.generate();
pacquet_10.generate();

//ON CRÉÉ LES BOITES
for (var i = 0; i < boxes.length; i++) {
	boxes[i].generate();
}

//ON DETERMINE LES COORDONNÉES DE LA CASE AU DESSUS DE LAQUELLE LA SOURIS SE TROUVE
colonneSurvol = Math.ceil(mouseX / width * nbColonnes);
ligneSurvol = Math.ceil(mouseY / height * nbLignes);
//text(colonneSurvol + ", " + ligneSurvol, mouseX, mouseY); // DÉCOMMENTER CETTE LIGNE POUR VOIR LE NUM AU NIVEAU DU CURSEUR

```

}

//QUAND ON APPUIE SUR LA SOURIS  
function mousePressed() {  
//ON S’OCCUPE DES BOITES  
for (let i = 0; i \< boxes.length; i++) {  
boxes[i].pressed();  
}  
//ON S’OCCUPE DES PACQUETS  
pacquet\_1.pressed();  
pacquet\_2.pressed();  
pacquet\_3.pressed();  
pacquet\_4.pressed();  
pacquet\_5.pressed();  
pacquet\_6.pressed();  
pacquet\_7.pressed();  
pacquet\_8.pressed();  
pacquet\_9.pressed();  
pacquet\_10.pressed();

}

function mouseReleased() {  
// FIN DU DRAG  
for (let i = 0; i \< boxes.length; i++) {  
boxes[i].released();  
}  
}

//DESSIN DE LA GRILLE  
function grille() {  
for (var x = 0; x \< width; x += width / nbColonnes) {  
for (var y = 0; y \< height; y += height / nbLignes) {  
//stroke(0);  
//strokeWeight(0.1);  
//line(x, 0, x, height);  
//line(0, y, width, y);  
}  
}  
}

function saveToFile() {  
// Save the current canvas to file as png  
saveCanvas(‘mycanvas’, ‘png’)  
}`Preformatted text`

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 2:34pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/2 "2020-05-14T14:34:27Z")

</div>

Hello @Coco5,

Welcome to the forum! It’s hard to tell without being able to run and test your sketch. Do you mind sharing it with us in the web editor at [https://editor.p5js.org](https://editor.p5js.org)?

If not, have you checked the [JavaScript console for errors](https://happycoding.io/tutorials/javascript/developer-tools)?

---

<div class="post-metadata">

**Author:** ![Coco5](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Coco5](https://discourse.processing.org/u/Coco5)\
**Post date:** [May 14, 2020, 5:58pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/3 "2020-05-14T17:58:22Z")

</div>

Okay, is it the link working ?

[https://editor.p5js.org/Coline/sketches/QsoXSzrj6](https://editor.p5js.org/Coline/sketches/QsoXSzrj6)

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 6:21pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/4 "2020-05-14T18:21:49Z")

</div>

Yes, thanks. So, if you run the sketch and click the button, you should see an error in the console.

 ![Error in JavaScript console: refreshPage is not defined.](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3c89d5ebbec48b81cd1f9938bba5fde15561d611.png)

Now, that message is definitely a clue! 🙂 You could go through the code base and look for any lingering references to that variable/function name.

---

<div class="post-metadata">

**Author:** ![Coco5](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Coco5](https://discourse.processing.org/u/Coco5)\
**Post date:** [May 14, 2020, 6:53pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/5 "2020-05-14T18:53:33Z")

</div>

I don’t speak about the reset button. My problem is the button “Save Canvas” I have add in the function setup (sketch.js line 59) and doesn’t work (doesn’t even appear on my canvas)… ![Capture d’écran 2020-05-14 à 20.53.14](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5c5ddccfd72ffc88bd634fc34b4b56da546257d8.png)

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 7:11pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/6 "2020-05-14T19:11:46Z")

</div>

Sorry, I got so carried away with the error messages that I missed that. 😅 But actually, that’s not a bad idea. Focusing on the error messages, that is, resolving them one at a time.

There’s nothing wrong with the save button (`removeBtn`) code that I can tell. So the problem lives somewhere else in the code base.

Try removing all code inside `setup` except the button generation. What happens?

---

<div class="post-metadata">

**Author:** ![Coco5](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Coco5](https://discourse.processing.org/u/Coco5)\
**Post date:** [May 14, 2020, 7:33pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/7 "2020-05-14T19:33:45Z")

</div>

(I’ve solved the reset problem)

literally nothing ! (Script error. (: line 0)) ☹  
I don’t understand

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 8:44pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/8 "2020-05-14T20:44:22Z")

</div>

Okay, I’ll admit that’s a little weird. The console looks like this for me in Chrome:

 ![Console error: d._validateParameters is not a function.](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/801443d11778e9784b4438580b9a2b24726fd5a7.png)

That error is not from your part of the code, it’s from p5.js itself. It’s another clue. So let us take a look at `p5.min.js`… At the top you’ll find:

```auto
/*! p5.js v0.5.2 June 17, 2016 */

```

That’s a pretty old build of the p5.js library. Antique, even. 🙂 So my suggestion is to delete `p5.min.js` and `p5.dom.min.js` from the project and in `index.html`:

```auto
    <!-- Remove the following two lines... -->
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>

    <!-- And add these instead... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>

```

Then what happens?

---

<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:** [May 14, 2020, 9:02pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/9 "2020-05-14T21:02:39Z")

</div>

An always updated p5js version “index.html”: 😉

```auto
<script defer src=https://Unpkg.com/p5></script>
<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 9:10pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/10 "2020-05-14T21:10:47Z")

</div>

I wish I was young and brave enough to let my code update without me telling it to. 😄 But at least it’s good knowing you’re out there living the dream, @GoToLoop.

---

<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:** [May 14, 2020, 9:22pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/11 "2020-05-14T21:22:04Z")

</div>

> [@Sven](#):
>
> I wish I was young and brave enough to let my code update without me telling it to.

Obviously that was an “index.html” file geared towards the development phase.

For deployment we may wish to specify a specific version or a range version & use minified files.

The “index.html” below would grab the most updated minified p5.js version range starting at 1.0.x & below 1.1.x:

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5@1.0></script>
<script defer src=sketch.js></script>

```

> **[jsDelivr - A free, fast, and reliable CDN for JS and Open Source](https://www.jsdelivr.com/)**
>
> Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

---

<div class="post-metadata">

**Author:** ![Coco5](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Coco5](https://discourse.processing.org/u/Coco5)\
**Post date:** [May 15, 2020, 10:21pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868/12 "2020-05-15T22:21:09Z")

</div>

OMG this is working, thanks a looooot !