Showing Total with 2 Decimal Places

Question

I'm working on a restaurant online menu and need to show the total as customers add items to the menu. However, my total only updates with 1 decimal. I'm trying to use toFixed(2) but can't quite get it working.

var banquetPrice = parseInt($(document).find(".menuChoice").val());
$(".menuChoice").change(function () {
updateTotal()
});
var total = (banquetPrice * numGuests) + (9.25 * numGuac) + (9.25 * numQuesa) + (9.25 * numNachos)

$("#total").html(total);
total.toFixed(2);

Any help would be greatly appreciated!

When you say "My total updates only with 1 decimal", do you mean your `#total` element? You're not calling the `toFixed(2)` until *after* you set the html. Also, you need to set it to itself, like `total = total.toFixed(2);` — Tyler Roper, Mar 08 '17 at 19:00

score 1 · Accepted Answer · answered Mar 08 '17 at 19:05

Here you go buddy..

var total = (12.35 * 5) + (9.25 * 1) + (9.25 * 1) + (9.25 * 1)

$("#total").html(total.toFixed(2));

label{
border-bottom : 2px solid green;
font-weight: 900;
font-size: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label id="total" ></label>
</div>

score 0 · Answer 2 · answered Mar 08 '17 at 19:12

As was stated in the comments above, you should be calling total.toFixed(2) on the same line that you update the text of your #total element. You currently discard the return value of toFixed instead of using it. Using the more performant .text() instead of .html(), that line now becomes:

$("#total").text(total.toFixed(2))

Demo:

$(".menuChoice").change(updateTotal)

updateTotal()

function updateTotal() {
  // Assuming that these variables are already
  // defined and set to meaningful values
  var numGuests = 1
  var numGuac = 1
  var numQuesa = 1
  var numNachos = 1
  
  var banquetPrice = +$(".menuChoice").val()
  var total = (banquetPrice * numGuests) + (9.25 * numGuac) + (9.25 * numQuesa) + (9.25 * numNachos)
  $("#total").text(total.toFixed(2))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Menu Choice: <input class="menuChoice" value="0"/>
<p>Total: $<span id="total"></span></p>

Showing Total with 2 Decimal Places

2 Answers2

Demo: