# Sending Values Between Functions

**URL:** <https://discourse.processing.org/t/sending-values-between-functions/12927>\
**Category:** Coding Questions\
**Created:** [July 23, 2019, 7:40pm UTC](https://discourse.processing.org/t/sending-values-between-functions/12927 "2019-07-23T19:40:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shodai](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@shodai](https://discourse.processing.org/u/shodai)\
**Post date:** [July 23, 2019, 7:40pm UTC](https://discourse.processing.org/t/sending-values-between-functions/12927/1 "2019-07-23T19:40:16Z")

</div>

I am trying to use the p5js.gui library to collect a simple text input and then just output that input to the screen. I have tried a number of different approaches but keep running into errors. This is what I have so far.

```auto
let button;

function setup() {
  var inp = createInput('');
  inp.position(100,100);
  newInput = inp.input(myInputEvent);
  button = createButton('click me');
  button.position(19, 19);
  button.mousePressed(changeText(newInput));
  createCanvas(500, 500);
}

function myInputEvent() {
  //console.log('you are typing: ', this.value());
  var myInput = this.value();
  return myInput;
}

function changeText(nextInput){
  text (nextInput, 100, 200);
}

```

I have had some success by moving the text output to the myInputEvent() function but it prints it out as I am entering into the text field. I want to print out only when the button is clicked.  
I believe the issue might be that I am not properly passing the value from one function to another, but am not really sure.  
Any help is appreciated.

---

<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:** [July 23, 2019, 8:02pm UTC](https://discourse.processing.org/t/sending-values-between-functions/12927/2 "2019-07-23T20:02:25Z")

</div>

> [@shodai](#):
>
> `button.mousePressed(changeText(newInput));`

You are passing to `mousePressed()` what is returned by invoking `changeText(newInput)` at that moment; which is `undefined`.

Instead, you need to pass the callback itself: `button.mousePressed(changeText);`

We can’t control when it’s invoked nor what is passed to a callback.

In order to access the variable _inp_ anywhere, declare it globally, just like you did to _button_:  
`let button, inp;`

Then you can access it inside **changeText()** callback:

```javascript
function changeText() {
  text(inp.value(), 100, 200)
}

```

---

<div class="post-metadata">

**Author:** ![shodai](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@shodai](https://discourse.processing.org/u/shodai)\
**Post date:** [July 23, 2019, 8:13pm UTC](https://discourse.processing.org/t/sending-values-between-functions/12927/3 "2019-07-23T20:13:19Z")

</div>

Thank you so much, that really helped. Here is the working code in case anyone else needs it as reference.

```auto
//global variables
let button;
let inp;

function setup() {
  inp = createInput('');
  inp.position(100,100);
  newInput = inp.input(myInputEvent);
  button = createButton('click me');
  button.position(19, 19);
  button.mousePressed(changeText);
  createCanvas(500, 500);
}

function myInputEvent() {
  var myInput = this.value();
  return myInput;
}

function changeText(){
  text (inp.value(), 100, 200);
}

```