# Press Button to Dispaly Text on the Screen

**URL:** <https://discourse.processing.org/t/press-button-to-dispaly-text-on-the-screen/36591>\
**Category:** Coding Questions\
**Created:** [April 25, 2022, 5:40pm UTC](https://discourse.processing.org/t/press-button-to-dispaly-text-on-the-screen/36591 "2022-04-25T17:40:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kitessa](https://avatars.discourse-cdn.com/v4/letter/k/5fc32e/32.png) [@Kitessa](https://discourse.processing.org/u/Kitessa)\
**Post date:** [April 25, 2022, 5:40pm UTC](https://discourse.processing.org/t/press-button-to-dispaly-text-on-the-screen/36591/1 "2022-04-25T17:40:18Z")

</div>

Hi There,

Just trying to make 3 buttons work in P5Js. I am trying to have some text displayed every time you press the button but I am struggling to write this piece of code that will get text displayed. Thast my code so far:  
\<let button1  
let button2  
let button3

function setup() {  
createCanvas(400, 400);  
}  
function draw() {  
background(211, 188, 213);  
textSize(22);  
fill(11,106,125);  
text(‘Digital Welbeing’,115, 30);

button1 = createButton(“What is it?”);  
button1.size(100, 50);  
button1.position(20, 50);  
button1.mousePressed (text);

button2 = createButton(“How to pratice it?”);  
button2.size(100, 50);  
button2.position(140, 50);

button3 = createButton(“Food for thought”);  
button3.size(100, 50);  
button3.position(260, 50);  
}

Will be very grateful for some help

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 25, 2022, 8:11pm UTC](https://discourse.processing.org/t/press-button-to-dispaly-text-on-the-screen/36591/2 "2022-04-25T20:11:46Z")

</div>

Hi @Kitessa,

Welcome to the forum! 😉

Please format your code by using the `</>` button when editing a message or use backquotes around the code like ``` code ``` → `code`

First thing to understand is that the `draw` function is executed roughly 60 times per second so any operation that need to be done only once (for example the creation of buttons) can be done in the `setup` function which is made for that.

So you can create your buttons in the setup function like so:

```auto
function setup() {
  createCanvas(400, 400);
  
  button1 = createButton("What is it?");
  button1.size(100, 50);
  button1.position(20, 50);
  // ...
}

```

Unless the position and size of the buttons will change during time, you an do it in the setup.

Next you use the [`mousePressed`](https://p5js.org/reference/#/p5.Element/mousePressed) method for the button. In the documentation it says:

> The .[mousePressed()](https://p5js.org/reference/#/p5.Element/mousePressed) function is called once after every time a mouse button is pressed over the element.
> 
> Usage: `mousePressed(fxn)`  
> `fxn`: function to be fired when mouse is pressed over the element.

So you passed the `text` function that will be called whenever the button is pressed. The issue is that the `text` function accepts 3 arguments not 0 so you have an error. (you can try to call `text()` alone and see the error).

If you want a text to be toggled when you press the button, simply use a boolean variable and set it to true when the mouse is pressed.

To do something on press you need to pass a function like:

```auto
function onButtonPress() {
  alert("Button was pressed!");
}

button1.mousePressed(onButtonPress);

```

If you want a text to be displayed **only** when the button is pressed then you might also want to look at [`mouseReleased()`](https://p5js.org/reference/#/p5.Element/mouseReleased).