Variable not updating its value when Returning it

Question

I have some HTML checkboxes and I have selected them inside Javascript using an Array. Each of those checkboxes has a different price and after looping through the 'selected ones' the final price only updates inside the function. If I try to use it outside, it returns '0' (the initial value).

HTML:

<input type="checkbox" name="topping" value="Cheese Topping - £0.20" onclick="Topping_Order();">
<p class="size">Cheese<span>£0.20</span></p><br>

<input type="checkbox" name="topping" value="Mushrooms Topping - £0.40" onclick="Topping_Order();">
<p class="size">Mushrooms<span>£0.40</span></p><br>

<input type="checkbox" name="topping" value="Ham Topping - £0.50" onclick="Topping_Order();">
<p class="size">Ham<span>£0.50</span></p><br>

<input type="checkbox" name="topping" value="Anchovies Topping - £0.60" onclick="Topping_Order();">
<p class="size">Anchovies<span>£0.60</span></p>

JS:

// Pizza Topping Order
var topping_prices = new Array();
    topping_prices["Cheese Topping - £0.20"] = 0.2;
    topping_prices["Mushrooms Topping - £0.40"] = 0.4;
    topping_prices["Ham Topping - £0.50"] = 0.5;
    topping_prices["Anchovies Topping - £0.60"] = 0.6;

function Topping_Order(){
  var topping_price = 0;
  var selected_topping = theForm.elements["topping"];
  for (var i = 0; i< selected_topping.length; i++){
    if (selected_topping[i].checked == true){
      topping_price = topping_price + topping_prices[selected_topping[i].value];
    }
  }
  console.log("Total price inside the function is: £" + topping_price.toFixed(2));
  return topping_price;
}
var topping_order_value = Topping_Order();
console.log("Total price outside the function is: £" + topping_order_value.toFixed(2));

Answer 1

You never use the topping_order_value after the first call to Topping_Order().

You need to call Topping_Order() and use its return value:

var topping_prices = new Array();
topping_prices["Cheese Topping - £0.20"] = 0.2;
topping_prices["Mushrooms Topping - £0.40"] = 0.4;
topping_prices["Ham Topping - £0.50"] = 0.5;
topping_prices["Anchovies Topping - £0.60"] = 0.6;

function Topping_Order() {
  var topping_price = 0;
  var selected_topping = theForm.elements["topping"];
  for (var i = 0; i < selected_topping.length; i++) {
    if (selected_topping[i].checked == true) {
      topping_price = topping_price + topping_prices[selected_topping[i].value];
    }
  }
  console.log("Total price inside the function is: £" + topping_price.toFixed(2));
  return topping_price;
}

function updateToppingPrice() {
  var topping_price = Topping_Order();
  
  console.log(topping_price.toFixed(2));
  var el = document.getElementById('total');
  el.innerHTML = topping_price.toFixed(2);
}

<form id="theForm">
  
  <div class="size">
  <input type="checkbox" name="topping" value="Cheese Topping - £0.20" onclick="updateToppingPrice();">
  Cheese<span>£0.20</span></div>
  
  <div class="size">
  <input type="checkbox" name="topping" value="Mushrooms Topping - £0.40" onclick="updateToppingPrice();">
  Mushrooms<span>£0.40</span></div>
  
  <div class="size">
  <input type="checkbox" name="topping" value="Ham Topping - £0.50" onclick="updateToppingPrice();">
  Ham<span>£0.50</span></div>
  
  <div class="size">
  <input type="checkbox" name="topping" value="Anchovies Topping - £0.60" onclick="updateToppingPrice();">
  Anchovies<span>£0.60</span></div>
</form>

<p id="total">...</p>