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_value后，您永远不会使用Topping_Order()。

您需要致电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时，它会触发函数调用，此时您已经检查了一些tooping，因此将返回更新值

变量在返回时不更新其值

3 个答案: