返回时变量不更新其值

Question

我有一些 HTML 复选框，我在 Javascript 中使用数组选择了它们。这些复选框中的每一个都有不同的价格，并且在遍历“选定的”之后，最终价格只会在函数内部更新。如果我尝试在外面使用它，它会返回“0”（初始值）。

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

在第一次调用Topping_Order() 后，您永远不会使用topping_order_value。

你需要调用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;
}

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>

Answer 2

根据评论

基本上，是的。如果您查看代码，我有 2 个控制台日志。这 第一个控制台日志（函数内部）基于实时更新 复选框选择。第二个使用相同的变量，但 从函数返回。我只需要使用的更新版本 价格，功能外

您的外部console.log 不会获得最新值，因为每次您调用Topping_Order，因为未在Topping_Order 中定义的语句不会被执行和局部变量外部无法访问topping_price。

你可以在另一个元素上显示这个值

<p id="finalValue"></p>

并将这一行添加到Topping_Order

document.getElementById( "finalValue" ).innerHTML = "Total price inside the function is: £" + topping_price.toFixed(2);

演示

// 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 = document.querySelectorAll('[name="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];
    }
  }
  document.getElementById( "finalValue" ).innerHTML = "Total price inside the function is: £" + topping_price.toFixed(2);
  return topping_price;
}

<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>

<p id="finalValue"></p>

Answer 3

var topping_order_value = Topping_Order();（加载时触发）

在您的 JS 文件中，当上述行触发函数调用时，您没有选择顶部，因为它将返回初始值 0

当您选中复选框 onclick 时，它会触发函数调用，此时您已检查了一些过度检查，因此将返回更新的值