Need help on a simple javascript task

Question

I am having trouble correctly formatting my price after I submit my form. Here are my two errors:

1. If I select a $10.00 item with a $1.00 item, the price comes out to $11.

2. If I select a $10.00 item with a $1.50 item, the price comes out to $11.5.

My goal is to have the price out put be $11.00 or $11.50.

Here is my js code:

<script>
     function placeOrder(){

     var pizzaSize =   document.getElementById("pizzaType").value;
     
     
     const pepperoni = document.getElementById("pepperoni");
     const mushrooms = document.getElementById("mushrooms");
     const hamPine =   document.getElementById("hamPine");
     const onions=     document.getElementById("onions");
     
     if (pepperoni.checked === true){
         document.getElementById("pepperoniOrder").innerHTML = document.getElementById("pepperoni").name;
         var cost1 = document.getElementById("pepperoni").value;
         document.getElementById("pepperoniImage").style.display = "block";
     } else {
         var cost1 = 0;
     }
     if (mushrooms.checked === true){
         document.getElementById("mushroomOrder").innerHTML = document.getElementById("mushrooms").name;
         var cost2 = document.getElementById("mushrooms").value;
         document.getElementById("mushroomsImage").style.display = "block";
     } else {
         var cost2 = 0;
     }
     if (hamPine.checked === true){
         document.getElementById("hamPineOrder").innerHTML = document.getElementById("hamPine").name;
         var cost3 = document.getElementById("hamPine").value;
         document.getElementById("hamPineImage").style.display = "block";
     } else {
         var cost3 = 0;
     }
     if (onions.checked === true){
         document.getElementById("onionsOrder").innerHTML = document.getElementById("onions").name;
         var cost4 = document.getElementById("onions").value;
         document.getElementById("onionsImage").style.display = "block";
     } else {
         var cost4 = 0;
     }
     
     var pizzaSizeArray = pizzaSize.split("-");
     var pizzaCost =      parseFloat(pizzaSizeArray[1].replace(" $", ""));
     var finalCost =      (pizzaCost + +cost1 + +cost2 + +cost3 + +cost4);
     document.getElementById("completeOrder").innerHTML = "$" + finalCost;
     
     }
  </script>

Here is the html that goes with other pricing:

<p>
        <label>
           Pizza Type:
           <br>
           <select id="pizzaType">
              <option>Medium - $7.00</option>
              <option>Large - $10.00</option>
           </select>
        </label>
     </p>
     <p>
        <label>
        Toppings: 
        <br>
        <input type="checkbox" id="pepperoni" name="Pepperoni" value="1.50">
        <label for="pepperoni"> Pepperoni - $1.50</label><br>
        <input type="checkbox" id="mushrooms" name="Mushrooms" value="1.00">
        <label for="mushrooms"> Mushrooms - $1.00</label><br>
        <input type="checkbox" id="hamPine" name="Ham & Pineapple" value="2.00">
        <label for="hamPine"> Ham & Pineapple - $2.00</label><br>
        <input type="checkbox" id="onions" name="Onions" value="1.00">
        <label for="onions"> Onions - $1.00</label><br><br>
        </label>
     </p>

Answer 1

Have you tried adding following? You need to format your code to get the value as double not var.

(Math.round(num * 100) / 100).toFixed(2);