Simple Cost Calculator

Hi, this is a personal project that calculates the total price of pizzas.
I’m having trouble passing the total cost of the pizza to the message.innerHTML and don’t know what’s wrong with it. Also, 0 or negative numbers doesn’t show the message I have written.

"use strict";

//Get the number of pizzas to order from user (input)
let numOfPizza = document.getElementById("quantity");
let message = document.getElementById("message");
const buttonCal = document.querySelector("button");
buttonCal.addEventListener("click", calculateCost);
let totalPrice = 0;
function calculateCost() {
  //list of pizza prices
  const pizza1 = {
    qty: 1,
    price: 6.45,
  };

  const pizza2 = {
    qty: 2,
    price: 12.0,
  };

  const pizza3 = {
    qty: 3,
    price: 14.0,
  };

  //storing pizza objects into an array
  const pizzas = [pizza1, pizza2, pizza3];

  if (numOfPizza === 1) {
    totalPrice += pizzas[pizza1].price;
  } else if (numOfPizza % 2 === 0 && numOfPizza < 5) {
    totalPrice += pizzas[pizza2].price * (numOfPizza / 2);
  } else if (numOfPizza % 3 === 0) {
    totalPrice += pizzas[pizza3].price * numOfPizza;
  } else if (numOfPizza % 3 === 1) {
    totalPrice +=
      pizzas[pizza3].price * (numOfPizza / 3) + pizzas[pizza1].price;
  } else if (numOfPizza % 3 === 2) {
    totalPrice +=
      pizzas[pizza3].price * (numOfPizza / 3) + pizzas[pizza2].price;
  } else {
    message.innerHTML =
      "Please enter a positive number. You cannot order 0 pizza or negative pizzas, my friend! You'll go hungry and make Italians sad!";
  }
  message.innerHTML =
    "You ordered " +
    numOfPizza.value +
    " pizza(s). The total cost of your order is: $" +
    totalPrice +
    ".";
}
```<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ordering form</title>
  </head>

  <body>
    <h1>PizzasOnly ordering form</h1>
    <p>
      Simply enter the number of pizzas you want into the input below to find
      out the cost of your order
    </p>
    <form id="orderForm">
      <p>
        <label for="quantity">Enter number of pizzas wanted:</label>
        <input type="text" name="quantity" id="quantity" />
      </p>
      <p>
        <button type="button">Total cost</button>
      </p>
    </form>
    <div id="message"></div>
    <script src="scripts/restaurant.js"></script>
  </body>
</html>

Check your if statements! I went through your code and added some console.logs and it seems that only the else statement at the bottom is executed, then innerHTML is set.
Try for yourself, you’ll see that the total price is never calculated, but the number of pizzas is taken in.

Hi again - I went for lunch and now I’ve sat down to have another look at your code and I realized what the problem is.
When you set numOfPizza:

let numOfPizza = document.getElementById("quantity");

What you are actually doing is setting it equal to the HTML element.

console.log(numOfPizza);
//prints the entire HTML element

Instead you need to access the .value attribute inside the HTML element.

Another issue is is when you try to access your pizzas array.
As it is an array, you have to use the index of the element inside and NOT the name of it.
So, instead of:

totalPrice += pizzas[pizza1].price;

Do:

totalPrice += pizzas[0].price;

With these changes and a little tweaking, you should have a nice pizza cost calculator in no time!

1 Like

Good catch with the arrays. I tried to set numOfPizza with a .value attribute and now the console is able to read the number but it’s still not able to print out the number and the total cost. Not sure how to debug js correctly.

"use strict";
//This program calculates the total cost of pizzas using the cheapest deal for the customer.


//Get the number of pizzas to order from user (input)
let numOfPizza = document.getElementById("quantity").value;
let message = document.getElementById("message");
const buttonCal = document.querySelector("button");
buttonCal.addEventListener("click", calculateCost);
let totalPrice = 0;

function calculateCost() {
  //list of pizza prices
  const pizza1 = {
    qty: 1,
    price: 6.45,
  };

  const pizza2 = {
    qty: 2,
    price: 12.0,
  };

  const pizza3 = {
    qty: 3,
    price: 14.0,
  };

  //storing pizza objects into an array
  const pizzas = [pizza1, pizza2, pizza3];

  if (numOfPizza === 1) {
    totalPrice += pizzas[0].price;
  } else if (numOfPizza % 2 === 0 && numOfPizza < 5) {
    totalPrice += pizzas[1].price * (numOfPizza / 2);
  } else if (numOfPizza % 3 === 0) {
    totalPrice += pizzas[2].price * numOfPizza;
  } else if (numOfPizza % 3 === 1) {
    totalPrice += pizzas[2].price * (numOfPizza / 3) + pizzas[0].price;
  } else if (numOfPizza % 3 === 2) {
    totalPrice += pizzas[2].price * (numOfPizza / 3) + pizzas[1].price;
  } else {
    message.innerHTML =
      "Please enter a positive number. You cannot order 0 pizza or negative pizzas, my friend! You'll go hungry and make Italians sad!";
  }
  message.innerHTML =
    "You ordered " +
    numOfPizza +
    " pizza(s). The total cost of your order is: $" +
    totalPrice +
    ".";
}

Try to put it all on one line:

let pizza_price_message = "You ordered " + numOfPizza + " pizza(s). The total cost of your order is: $" + totalPrice + ".";

It worked for me.

Solved the code:

The global variables were placed inside the function.

"use strict";

//Get the number of pizzas to order from user (input)

let message = document.getElementById("message");
const buttonCal = document.querySelector("button");
buttonCal.addEventListener("click", calculateCost);

function calculateCost() {
  let numOfPizza = parseInt(document.getElementById("quantity").value);
  let totalPrice = 0;
  //list of pizza prices
  const pizza1 = {
    qty: 1,
    price: 6.45,
  };

  const pizza2 = {
    qty: 2,
    price: 12.0,
  };

  const pizza3 = {
    qty: 3,
    price: 14.0,
  };

  //storing pizza objects into an array
  const pizzas = [pizza1, pizza2, pizza3];

  if (numOfPizza === 0 || numOfPizza < 0) {
    message.innerHTML =
      "Please enter a positive number. You cannot order 0 pizza or negative pizzas, my friend! You'll go hungry and make Italians sad!";
    return;
  } else if (numOfPizza === 1) {
    totalPrice += pizzas[0].price;
  } else if (numOfPizza % 2 === 0 && numOfPizza < 5) {
    totalPrice += pizzas[1].price * (numOfPizza / 2);
  } else if (numOfPizza % 3 === 0) {
    totalPrice += pizzas[2].price * (numOfPizza / 3);
  } else if (numOfPizza % 3 === 1) {
    totalPrice += pizzas[2].price * ((numOfPizza - 1) / 3) + pizzas[0].price;
  } else if (numOfPizza % 3 === 2) {
    totalPrice += pizzas[2].price * ((numOfPizza - 2) / 3) + pizzas[1].price;
  }
  message.innerHTML =
    "You ordered " +
    numOfPizza +
    " pizza(s). The total cost of your order is: $" +
    totalPrice +
    ".";
}
1 Like