Adding up numbers in JS based on input values

Question

I have the following functionality:

• An item with a base / retail price (.configurator__summary-figure-basePrice)
• A user can select colours or change the wheels of this item (which are considered extras)
• When a user selects extras, I want it to show the cost for all extras and then add that cost also to the total item price (which is shown in configurator__summary-figure-total).

The issue I'm having currently is that, when adding up two numbers, I'm getting the incorrect results. I have tried to resolve this by using toFixed(2), but it still doesn't showcase the correct results. See demo below:

$(function() {

  var radioBtn = $(".configurator__option-radioBtn"),
      totalExtras = $(".configurator__summary-figure-extras"),
      totalPrice = $(".configurator__summary-figure-total"),
      basePrice = $(".configurator__summary-figure-basePrice");

  $('.configurator__options-group').each(function() {

    radioBtn.click(function() {

      // get item price
      var item_price = $(this).attr("data-price");
      item_price = parseFloat(item_price).toFixed(2);
      console.log("item price " + item_price);

      // get current total extras price
      var currentExtras = totalExtras.text();
      // currentExtras = parseFloat(currentExtras).toFixed(2);
      /* console.log("current extras " + currentExtras); */

      var total = currentExtras + item_price;
      // console.log("total " + total.toFixed(2));

      // add item prices to extras
      currentExtras = currentExtras + item_price;
      currentExtras = parseFloat(currentExtras).toFixed(2);
      totalExtras.html(currentExtras);

      // add extra price to total

    });

  });

});

.configurator__summary-details{
  background: lightgrey;
  padding: 15px;
}

.configurator__options{
  margin-top: 30px;
}

.configurator__options  .label{
  margin: 20px 0;
  display: block;
}

.configurator__option{
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="configurator">

  <!-- summary -->

  <div class="configurator__summary-details">

    <div class="configurator__summary-box">
      <p>Retail price:</p>
      <div>
        <span>£</span>
        <span class="configurator__summary-figure-basePrice">30,000</span>
      </div>
    </div>

    <div class="configurator__summary-box">
      <p>Price for optional extras:</p>
      <div>
        <span>£</span>
        <span class="configurator__summary-figure-extras">0.00</span>
      </div>
    </div>

    <div class="configurator__summary-box">
      <p>Total retail price:</p>
      <div>
        <span>£</span>
        <span class="configurator__summary-figure-total">30,000</span>
      </div>
    </div>

  </div>

  <!-- inputs -->

  <div class="configurator__options">

    <!-- colors -->
    <div class="configurator__options-group">
      <span class="label">Colors</span>
      <div class="configurator__option">
        <input class="configurator__option-radioBtn configurator__option-radioBtn--exteriorColor" type="radio" name="input-exteriorColor" data-price="50.00">
        <span class="configurator__option-name">Pearl Black (£50)</span>
      </div>
      <div class="configurator__option">
        <input class="configurator__option-radioBtn configurator__option-radioBtn--exteriorColor" type="radio" name="input-exteriorColor" data-price="100.00">
        <span class="configurator__option-name">Candy White (£100)</span>
      </div>
    </div>

    <!-- wheels -->
    <div class="configurator__options-group">
      <span class="label">Wheels</span>
      <div class="configurator__option">
        <input class="configurator__option-radioBtn" type="radio" name="input-alloyWheels" id="wheel-1" data-price="65.00">
        <span class="configurator__option-name">Alloy 1 (£65)</span>
      </div>
    </div>


  </div>

</div>

Answer 1

you could try something like this:

$(function () {
        var radioBtn = $(".configurator__option-radioBtn"),
          totalExtras = $(".configurator__summary-figure-extras"),
          totalPrice = $(".configurator__summary-figure-total"),
          basePrice = $(".configurator__summary-figure-basePrice");

        $(".configurator__options-group").each(function () {
          radioBtn.click(function () {
            let currentExtras = 0;
            let elements = $(":radio:checked").each(function () {
              currentExtras += parseFloat($(this).attr("data-price"));
            });

            let base = parseFloat(basePrice.text().replace(",", ""));
            var total = base + currentExtras;

            // add item prices to extras
            totalExtras.text(currentExtras);
            totalPrice.text(total.toLocaleString("en-GB"));

            // add extra price to total
          });
        });
      });

I had do let base = parseFloat(basePrice.text().replace(",", "")); because the parseFloat doesn't really work with separators that are not in the decimal place.

You should probably add "None" radio buttons so the choices can be reset.