变量在返回时不更新其值

时间:2018-03-31 12:43:48

标签: javascript html function input return

我有一些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));

3 个答案:

答案 0 :(得分:0)

第一次拨打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>

答案 1 :(得分:0)

基于评论

  

基本上,是的。如果你查看代码,我有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>

答案 2 :(得分:0)

var topping_order_value = Topping_Order();(在加载时会触发)

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

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