Question 43865 in Html Question posted in
Some basic documentation can be found here.

How can I create a function that adds up the values assigned to buttons? – Html

New coder here. I am creating a pizza menu app that adds up the values assigned to the topping buttons and displays them in the Total at the bottom of the list. But I am struggling to get the code to display the cost of the toppings as they are added.

Below is what I attempted:

let whiteWheat = document.getElementById("white-wheat");
let multiGrain = document.getElementById("multi-grain");
let caulifl = document.getElementById("cauliflower");
let thinCrust = document.getElementById("thin-crust");
let deepDish = document.getElementById("deep-dish");
let totalField = document.getElementById("total");
totalField = 0;

whiteWheat.addEventListener(click, function() {
  var totalCost = totalField + 10;
  var finalOrder = document.createElement("li");
  finalOrder.innerText = totalCost.value;
  totalField.appendChild(finalOrder);
});
<h1>PIZZA SUPREME</h1>
<h2>Select a crust and toppings to build your own pizza!</h2>
<h3>Crust</h3>
<h4>$10 per crust.</h4>
<ul><button id="white-wheat">white wheat</button></ul>
<ul><button id="multi-grain">multigrain</button></ul>
<ul><button id="cauliflower">Cauliflower</button></ul>
<ul><button id="thin-crust">Thin Crust</button></ul>
<ul><button id="deep-dish">Deep Dish</button></ul>

<h2>Total:</h2>
<div id="total">
</div>
Tags:

3

Answers


  1. 0

    You are so close! Firstly, there is no such word as click, what you wanted to do is 'click'. Secondly, you were using totalCost (the element reference) also as a number. What you wanted to do is two variables.

    Tried keeping it simple:

    // ... other code here ...
let totalField = document.getElementById("total");
let totalCost = 0;

whiteWheat.addEventListener('click', function() {
    totalCost += 10;
    var finalOrder = document.createElement("li");
    finalOrder.innerText = totalCost;
    totalField.appendChild(finalOrder);
});

    EDIT: I’m not sure why are you creating an li element. Perhaps you wanted to set the innerText of totalField only?

    Login or Signup to reply.
  2. 0

    A nicer approach might be to create a x-price attribute on the buttons and put them in a <div>. This way, you can use a single event listener and event propagation to add the values of the x-price attribute. Like this:

    let totalPrice = 0;
const totalDiv = document.getElementById('total');
const itemsDiv = document.getElementById('items');

document.getElementById('buttons').addEventListener('click', e => {
  totalPrice += parseFloat(e.target.getAttribute('x-price'));
  totalDiv.textContent = totalPrice;
  
  const li = document.createElement('li');
  li.textContent = e.target.textContent;
  itemsDiv.appendChild(li);
});
    <h1>PIZZA SUPREME</h1>
<h2>Select a crust and toppings to build your own pizza!</h2>
<h3>Crust</h3>
<div id="buttons">
  <button x-price="10">white wheat</button>
  <button x-price="5">multigrain</button>
  <button x-price="15">Cauliflower</button>
  <button x-price="10">Thin Crust</button>
  <button x-price="20">Deep Dish</button>
</div>

<h2>Total:</h2>
<div id="total"></div>
<div id="items"></div>

    Alternatively, you can forgo the x-price attribute if they all cost the same:

    let totalPrice = 0;
const totalDiv = document.getElementById('total');
const itemsDiv = document.getElementById('items');

document.getElementById('buttons').addEventListener('click', e => {
  totalPrice += 10;
  totalDiv.textContent = totalPrice;
  
  const li = document.createElement('li');
  li.textContent = e.target.textContent;
  itemsDiv.appendChild(li);
});
    <h1>PIZZA SUPREME</h1>
<h2>Select a crust and toppings to build your own pizza!</h2>
<h3>Crust</h3>
<div id="buttons">
  <button>white wheat</button>
  <button>multigrain</button>
  <button>Cauliflower</button>
  <button>Thin Crust</button>
  <button>Deep Dish</button>
</div>

<h2>Total:</h2>
<div id="total"></div>
<div id="items"></div>
    Login or Signup to reply.
  3. 0 
    <h1>PIZZA SUPREME</h1>
      <h2>Select a crust and toppings to build your own pizza!</h2>
      <h3>Crust</h3>
      <h4>$10 per crust.</h4>
      <ul><button id="white-wheat">white wheat</button></ul>
      <ul><button id="multi-grain">multigrain</button></ul>
      <ul><button id="cauliflower">Cauliflower</button></ul>
      <ul><button id="thin-crust">Thin Crust</button></ul>
      <ul><button id="deep-dish">Deep Dish</button></ul>

      <h2>Total:</h2>
      <div id="total">0</div>
      <script>
         let whiteWheat = document.getElementById("white-wheat")
         let multiGrain = document.getElementById("multi-grain")
         let caulifl = document.getElementById("cauliflower")
         let thinCrust = document.getElementById("thin-crust")
         let deepDish = document.getElementById("deep-dish")
         let totalField = document.getElementById("total")

         whiteWheat.addEventListener("click", function () {
            let a = parseInt(totalField.innerHTML)
            a+=10
            totalField.innerHTML = a.toString()
            /* var finalOrder = document.createElement("li")
            finalOrder.innerText = totalCost.value
            totalField("total").appendChild(finalOrder) */
         });
      </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search