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

How can we rewrite this?

Good evening guys, this is my first time using Stackoverflow, so please be kind.

I have been working on a restaurant order-type app for staff.

When I delete an item from the cart I would like the total to update.

I know there is probably a simple solution but any help would be much appreciated.

let subtotal = 0;

function Delete(currentEl) {
  currentEl.parentNode.parentNode.removeChild(currentEl.parentNode);
}

const calculateserviceCharge = subtotal => {
  const serviceCharge = subtotal * .12;
  const formattedserviceCharge = serviceCharge.toFixed(2);
  return formattedserviceCharge;
};

const calculateTotal = subtotal => {
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = parseFloat(subtotal) + parseFloat(serviceCharge);
  const formattedTotal = total.toFixed(2);

  return formattedTotal;
};

$('.btn').on('click', function() {
  const title = $(this).data('title');
  const price = $(this).data('price');

  const element = `
    <p class="cart-item-heading ">${title} £${price}   <button id="delete" onclick="Delete(this);">X</button>`;

  $('.cart-items').append(element);


  subtotal = subtotal + price;

  const formattedSubtotal = subtotal.toFixed(2.3);
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = calculateTotal(subtotal);

  $('.cart-math').html(`
    <p class="cart-math-item">
    <span class="cart-math-header">Subtotal:</span>
    <span class="g-price subtotal">
    <break>
    £${formattedSubtotal}</span>
    </p>
    <p class="cart-math-item">
    <span class="cart-math-header">Service Charge(12%):</span>
    <span class="g-price tax">£${serviceCharge}</span>
    </p>
    <p class="cart-math-item">
    <span class="cart-math-header">Total:</span>
    <span class="g-price total">£${total}</span>
    </p>
    
    `);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='hide-3' id="hide" style="background-color: #edb90f">Close</button>
<div class="mains" id="subject">
  <div id="cart-items" class="screen-cart">
    <h2>Your Order</h2>
    <ul class="cart-items" id="cart-items" ">
        </ul>
    
        <div class="cart-math " id="cart-math "">

  </div>
</div>
<button class="btn" style="background-color: #edb90f" data-title="Duck" data-price="21.95">Duck
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Chicken" data-price="18.95">Chicken
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Salmon Fillet" data-price="19.95">Salmon Fillet
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Orzotto" data-price="12.95">Orzotto
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Vegan Burger" data-price="15.45">Vegan Burger
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Sea Bass" data-price="16.95">Sea Bass
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Classic Burger" data-price="15.45">Classic Burger
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Tuna" data-price="22.95">Tuna
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Whole Sea Bream" data-price="49.95">Whole Sea Bream
    </button>
</div>
</dialog>
Tags:

2

Answers


  1. 0

    There are many solutions. Here is mine, I see that your btn has the price as a data attribute. So instead of adding/subtracting just recalculate each time you add an item or remove it.

    Loop through the buttons adding to a local variable the price from the button. Do your service charges etc.. in the same function then output it to your div.

    You can see it working by clicking my remove buttons.

    const calculateserviceCharge = subtotal => {
  const serviceCharge = subtotal * .12;
  const formattedserviceCharge = serviceCharge.toFixed(2);
  return formattedserviceCharge;
};

function calcTotal() {
  let subtotal = 0;

  $('.btn').each(function() {
    subtotal += $(this).data('price');
  })
  
  const formattedSubtotal = subtotal.toFixed(2.3);
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = (parseFloat(serviceCharge) + parseFloat(subtotal)).toFixed(2.3);

  $('.cart-math').html(`
                        <p class="cart-math-item">
                        <span class="cart-math-header">Subtotal:</span>
                        <span class="g-price subtotal">
                        <break>
                        £${formattedSubtotal}</span>
                        </p>
                        <p class="cart-math-item">
                        <span class="cart-math-header">Service Charge(12%):</span>
                        <span class="g-price tax">£${serviceCharge}</span>
                        </p>
                        <p class="cart-math-item">
                        <span class="cart-math-header">Total:</span>
                        <span class="g-price total">£${total}</span>
                        </p>
                        
                        `);

}

calcTotal();

$(".btn").on("click", function() {
  $(this).remove();
  calcTotal();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-price="5">REMOVE 5</button>
<button class="btn" data-price="15">REMOVE 15</button>
<button class="btn" data-price="3">REMOVE 3</button>

<div class="cart-math"></div>
    Login or Signup to reply.
  2. 0

    Just call the function that calculates your total everytime you delete from the cart.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search