Do I need to remove anything or do I just replace the current code?
Also im getting an error saying âScript error.ReferenceError: picker is not defined
at n.default.Element.pickEvent (/Tip%20Calculator.js:58:3)â
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 
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.
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?
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.
so should i not make calculation() a function then and just put it in draw() instead?
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.
1 Like
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
}
}
}
thanks! but you didnât âformat codeâ
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
so would button.mousePressed(calculation); being moved to function calculation() be an alternative or moving everything to draw()?
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
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)
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
}
}
I donât know if you figure this out, but the problem is that value returns a string, not a number. At this line,
total = tip + bill.value()
becomes
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,
total = tip + int(bill.value())
or
total = tip + parseInt(bill.value())
And I couldnât understand what you mean by ânothing showsâ What do you expect to show up?