# P5.js code for creating a calculator tip app confused

**URL:** <https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 8, 2021, 1:15pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219 "2021-04-08T13:15:41Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 17, 2021, 1:03am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/23 "2021-04-17T01:03:13Z")

</div>

Do I need to remove anything or do I just replace the current code?

 ![8B24936971D74D0A866FB8FD5F2711D3.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7159a975d714a6caee787759490140daf4d4fda6.png)

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 17, 2021, 1:07am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/24 "2021-04-17T01:07:21Z")

</div>

```auto
Also im getting an error saying “Script error.ReferenceError: picker is not defined

```

```auto
    at n.default.Element.pickEvent (/Tip%20Calculator.js:58:3)”

```

 ![8B24936971D74D0A866FB8FD5F2711D3.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7159a975d714a6caee787759490140daf4d4fda6.png)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 17, 2021, 7:21am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/25 "2021-04-17T07:21:01Z")

</div>

I cannot tell you every single step as it will end up giving a complete answer. What do _you_ think is the cause of the error? Also you should come back to the forum (not posting by email) and reformat the previous post with code using `</>` button - I feel not comfortable getting one line of question and giving you one like of answer 🙂

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 20, 2021, 3:27am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/26 "2021-04-20T03:27:28Z")

</div>

Hey so I seem to have gotten the images to work now but I want to be able to calculate the tip given a rating (percentage) like if the service was bad or good so I made a function for the calculations and in brackets next to ‘button.mousepressed’ I wrote calculation meaning the function for the actual calculation part but I keep on getting this error that’s not picking up the calculation part.

 ![Screenshot (198)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a14f4ef48d26d577f6e61e7d7e0e75798c23f0ba.png)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 20, 2021, 7:37am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/27 "2021-04-20T07:37:11Z")

</div>

Nice! But it seems you changed the code and without posting the updated code I cannot help you 🙂 what does the error say? Why do you think it happens? Did you actually define the function?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 20, 2021, 8:58am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/28 "2021-04-20T08:58:43Z")

</div>

Your `calculation()` function seems to only be defined in the scope of the `draw()` function. So When you call it outside of the draw function, it does not exist.

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 20, 2021, 12:56pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/29 "2021-04-20T12:56:15Z")

</div>

so should i not make calculation() a function then and just put it in draw() instead?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 20, 2021, 2:40pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/30 "2021-04-20T14:40:19Z")

</div>

no 🙂 I suggest two things. If you right click on the code, there should be a “format code” option in the editor to format the spacing and indentation. This will make the scope of the code obvious - just try it to see how the indentation changes, and see how `calculation` function changes.

Another thing is, instead of the screenshot, please post your updated code 🙂 You can also share a link to your replit project if you want. Otherwise we don’t have your whole code, we cannot try it and we cannot give you a concrete answer or suggestions.

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 20, 2021, 3:26pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/31 "2021-04-20T15:26:47Z")

</div>

```auto
var pickEvent
var img;
var img2;
var img3;
var sel;
var sel1;
var title;
var bill;
var answer;
var output;

// preload some images
function preload() {
  img = loadImage('mandarin.jpg');
  img2 = loadImage('bostonpizza.jpg');
  img3 = loadImage('nandos.jpg');
}

function setup() {

title = createElement('h1', 'Tip calculator'); // Create the main title for the question
title.position(265, 40); // Set the position of the title

  
  createCanvas(900, 500);  

  bill = createInput(); // Create the input box for the user to enter a number
  bill.position(312, 175); // Set the position of the input box

  textAlign(CENTER);
  background(200);
  sel = createSelect();
  sel.position(315, 110);
  sel.option('Mandarins');
  sel.option('Nandos');
  sel.option('Boston Pizza');
  sel.selected(pickEvent);
  

  textAlign(CENTER);
  background(200);
  sel1 = createSelect();
  sel1.position(325, 245);
  sel1.option('Very Bad');
  sel1.option('Bad');
  sel1.option('Okay');
  sel1.option('Good');
  sel1.option('Great');
  sel1.option('Excellent');
  sel1.option('Random Amount');
  sel1.selected('Service');
  output = createElement('h3', "") // Creating a placeholder for the final output

button = createButton('tip it'); // Create a button and the name inside the button
button.position(345, 285); // Set the position of the button
button.mousePressed(calculation); // When the mouse button is pressed on the button it goes to the calculation function

}

function draw() {

background(153);

let pickEvent = sel.value()

  if (pickEvent == 'Mandarins') {
    background(img);
  } 
  if (pickEvent == 'Nandos') {
    background(img3);
  } 
  if (pickEvent == 'Boston Pizza') {
    background(img2);
  }

  // Calculate the conversion
function calculation() {

let conversion = sel1.value(); // Set the drop down menu option to the variable conversion

//convert fahrenheit to celsius
if (sel1 == ('Very Bad')) { // Run this if the selection is set to F to C
answer = round(((bill.value() * .01), 2)) // Math to convert
total = answer + bill.value()
output.html('This is the answer: ' + answer + '\u2103') // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
output.position(315, 500) // Set the position of the answer

}
}
}

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 20, 2021, 3:31pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/32 "2021-04-20T15:31:17Z")

</div>

thanks! but you didn’t “format code” 🙂

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 20, 2021, 3:47pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/33 "2021-04-20T15:47:23Z")

</div>

```auto
var pickEvent
var img;
var img2;
var img3;
var sel;
var sel1;
var title;
var bill;
var answer;
var output;

// preload some images
function preload() {
  img = loadImage('mandarin.jpg');
  img2 = loadImage('bostonpizza.jpg');
  img3 = loadImage('nandos.jpg');
}

function setup() {

  title = createElement('h1', 'Tip calculator'); // Create the main title for the question
  title.position(265, 40); // Set the position of the title

  createCanvas(900, 500);

  bill = createInput(); // Create the input box for the user to enter a number
  bill.position(312, 175); // Set the position of the input box

  textAlign(CENTER);
  background(200);
  sel = createSelect();
  sel.position(315, 110);
  sel.option('Mandarins');
  sel.option('Nandos');
  sel.option('Boston Pizza');
  sel.selected(pickEvent);

  textAlign(CENTER);
  background(200);
  sel1 = createSelect();
  sel1.position(325, 245);
  sel1.option('Very Bad');
  sel1.option('Bad');
  sel1.option('Okay');
  sel1.option('Good');
  sel1.option('Great');
  sel1.option('Excellent');
  sel1.option('Random Amount');
  sel1.selected('Service');
  output = createElement('h3', "") // Creating a placeholder for the final output

  button = createButton('tip it'); // Create a button and the name inside the button
  button.position(345, 285); // Set the position of the button
  button.mousePressed(calculation); // When the mouse button is pressed on the button it goes to the calculation function

}

function draw() {

  background(153);

  let pickEvent = sel.value()

  if (pickEvent == 'Mandarins') {
    background(img);
  }
  if (pickEvent == 'Nandos') {
    background(img3);
  }
  if (pickEvent == 'Boston Pizza') {
    background(img2);
  }

  // Calculate the conversion
  function calculation() {

    let conversion = sel1.value(); // Set the drop down menu option to the variable conversion

    //convert fahrenheit to celsius
    if (sel1 == ('Very Bad')) { // Run this if the selection is set to F to C
      answer = round(((bill.value() * .01), 2)) // Math to convert
      total = answer + bill.value()
      output.html('This is the answer: ' + answer + '\u2103') // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
      output.position(315, 500) // Set the position of the answer

    }
  }
}

```

This is how you code should look like formatted with proper indentation. When coding, indentation is really important as it gives you a visual clue of what is where.

And here, you can clearly see `calculation()` is defined in `draw()`. So it’s valid only inside of `draw()`. You need to get it out to be able to use it in other places.

Also if you are using the p5.js web editor, you can auto format your code by clicking `Edit -> Tidy code`

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 20, 2021, 3:57pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/34 "2021-04-20T15:57:57Z")

</div>

so would `button.mousePressed(calculation);` being moved to `function calculation()` be an alternative or moving everything to `draw()`?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 20, 2021, 4:38pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/35 "2021-04-20T16:38:49Z")

</div>

the problem is that `button.mousePressed(calculation);` cannot see `calculation` because the former is inside `setup` and the later is in `draw`. You can either move `calculation` function outside `draw`, inside `setup` 🙂

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 20, 2021, 6:13pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/36 "2021-04-20T18:13:11Z")

</div>

okay thanks, also I want to make the original bill and the tip be added together when the button is clicked but when using the ‘add’ function in the line, nothing shows (ignore the comments made)

```auto
var pickEvent
var img;
var img2;
var img3;
var sel;
var sel1;
var title;
var bill;
var tip;
var output;
var output2;
var output3;

// preload some images
function preload() {
  img = loadImage('mandarin.jpg');
  img2 = loadImage('bostonpizza.jpg');
  img3 = loadImage('nandos.jpg');
}

function setup() {

  title = createElement('h1', 'Tip calculator'); // Create the main title for the question
  title.position(265, 40); // Set the position of the title

  createCanvas(900, 500);

  bill = createInput(); // Create the input box for the user to enter a number
  bill.position(312, 175); // Set the position of the input box

  textAlign(CENTER);
  background(200);
  sel = createSelect();
  sel.position(315, 110);
  sel.option('Mandarins');
  sel.option('Nandos');
  sel.option('Boston Pizza');
  sel.selected(pickEvent);

  textAlign(CENTER);
  background(200);
  sel1 = createSelect();
  sel1.position(325, 245);
  sel1.option('Very Bad');
  sel1.option('Bad');
  sel1.option('Okay');
  sel1.option('Good');
  sel1.option('Great');
  sel1.option('Excellent');
  sel1.option('Random Amount');
  sel1.selected('Service');
  output = createElement('h3', "") // Creating a placeholder for the final output
  output2 = createElement('h3' , "")
  output3 = createElement('h3' , "")

  button = createButton('tip it'); // Create a button and the name inside the button
  button.position(345, 285); // Set the position of the button
  button.mousePressed(calculation); // When the mouse button is pressed on the button it goes to the calculation function

}

function draw() {

  background(153);

  let pickEvent = sel.value()

  if (pickEvent == 'Mandarins') {
    background(img);
  }
  if (pickEvent == 'Nandos') {
    background(img3);
  }
  if (pickEvent == 'Boston Pizza') {
    background(img2);

  }
}
// Calculate the conversion
function calculation() {

  let conversion = sel1.value(); // Set the drop down menu option to the variable conversion

  //convert fahrenheit to celsius
  if (conversion == ('Very Bad')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .01), 2)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
  if (conversion == ('Bad')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .02), 3)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
  if (conversion == ('Okay')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .03), 4)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
  if (conversion == ('Good')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .04), 5)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
  if (conversion == ('Great')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .05), 6)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
  if (conversion == ('Excellent')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .06), 7)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
  if (conversion == ('Random Amount')) { // Run this if the selection is set to F to C
    tip = round(((bill.value() * .01), 2)) // Math to convert
    total = tip + bill.value()
    output.html('Original Bill: ' + bill.value()) // Create the screen output for the user. \u2103 is the HTML CSS degrees C symbol
    output2.html('Tip: ' + tip)
    output3.html('Total: ' + total)
    output.position(315, 300) // Set the position of the answer
    output2.position(315, 325) // Set the position of the answer
    output3.position(315, 350) // Set the position of the answer
  }
}

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 23, 2021, 8:02am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/37 "2021-04-23T08:02:19Z")

</div>

I don’t know if you figure this out, but the problem is that `value` returns a string, not a number. At this line,

```javascript
total = tip + bill.value()

```

becomes

```javascript
total = 2 + "10"

```

which results in “210” not 12. This is just a weird thing about javascript. You can fix it by converting the `value` to number, for example,

```javascript
total = tip + int(bill.value())

```

or

```javascript
total = tip + parseInt(bill.value())

```

And I couldn’t understand what you mean by “nothing shows” 🙂 What do you expect to show up?

[Previous page](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219.md?page=1)