# Buttons and input boxes

**URL:** <https://discourse.processing.org/t/buttons-and-input-boxes/34711>\
**Category:** Coding Questions\
**Created:** [January 18, 2022, 8:44am UTC](https://discourse.processing.org/t/buttons-and-input-boxes/34711 "2022-01-18T08:44:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![parichko](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@parichko](https://discourse.processing.org/u/parichko)\
**Post date:** [January 18, 2022, 8:44am UTC](https://discourse.processing.org/t/buttons-and-input-boxes/34711/1 "2022-01-18T08:44:14Z")

</div>

I am not really sure how buttons and input boxes functions work. I know for each button you have to create a function but I don’t know how to make them work. If someone can give a simple example of a button that changes the BG color or an input box that displays the text entered.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 18, 2022, 8:53am UTC](https://discourse.processing.org/t/buttons-and-input-boxes/34711/2 "2022-01-18T08:53:24Z")

</div>

here

> **[examples | p5.js](https://p5js.org/examples/dom-input-and-button.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<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:** [January 18, 2022, 8:59am UTC](https://discourse.processing.org/t/buttons-and-input-boxes/34711/3 "2022-01-18T08:59:26Z")

</div>

I’ve got a multiple button example here:

> [@Trying to make a multidimensional array which can connect to my buttons Please Help as soon as possible Please](https://discourse.processing.org/t/trying-to-make-a-multidimensional-array-which-can-connect-to-my-buttons-please-help-as-soon-as-possible-please/34047/2):
>
> Let me see if I got it right… You have an array w/ 6 buttons and a boolean array w/ 2 states. Each button makes 1 of the states true and the other false when clicked. So basically you need an extra array which stores the indices to be set to true when their corresponding button is clicked: STATE\_INDICES = Uint8Array.of(1, 0, 1, 1, 0, 1) The function createButton() has a 2nd parameter value which we can use it to store the index we want to be set to true for that button: [p5js.org/reference/…](http://p5js.org/reference/#/p5/createButton)