获取函数变量

Question

我有点想做我自己的网站，但只是提供一些功能，我已经很挣扎了……这个网站是一个在线食物 ordering.i 需要得到食物的总和……但我做不到这些值来自函数，即使我使用 return...有人帮我解决这个问题吗？我不太擅长 javascript 但我刚学了 2 天前

这是我目前的工作...

$('#jollyoption').click(function(totalchicken){   
  var e = document.getElementById("jollyoption");
  var chicken = e.options[e.selectedIndex].value;      
  var totalchicken = chicken;

  chicken = parseInt(chicken);    

  document.getElementById("demo").innerHTML = totalchicken;

  return totalchicken;
});

$('#jollyoption1').click(function(totalburger){
  var a = document.getElementById("jollyoption1");
  var burger = a.options[a.selectedIndex].value;
  var totalburger = burger;

  burger = parseInt(burger); 

  document.getElementById("demo1").innerHTML = totalburger;

  return totalburger;
});

$('#jollyoption2').click(function(totalfries){
  var a = document.getElementById("jollyoption2");
  var fries = a.options[a.selectedIndex].value;   
  var totalfries = fries;

  fries = parseInt(fries);

  document.getElementById("demo2").innerHTML = totalfries;

  return totalfries;
});

var total =totalfries+totalburger+totalchicken;

document.getElementById("demo3").innerHTML = total;

如果你有时间运行它...每次我下 4 家餐厅中第 1 家的订单数量（选择 jollibee PS:not 编辑其他餐厅）我明白了NaN 因为我无法在主体中取回变量及其值，所以我只能添加总数并打印它们 out.can 有人帮我解决这个问题吗？提前谢谢你

Answer 1

您可以做几件事来让它正常工作。首先，您需要使您的 3 个总变量 global variables。一旦你这样做了，你就可以创建一个更新总数的函数，并在每次你想要更新总数时调用它。目前，这是您所有 return 语句所在的位置。

这应该是您 javascript 的顶部。

var totalchicken = 0,
  totalburger = 0,
  totalfries = 0;

(document).ready(main());

function updateTotal() {
  var total = totalfries + totalburger + totalchicken;
  document.getElementById("demo3").innerHTML = total;
}

您可以将 return 语句替换为对 updateTotal 函数的调用。

updateTotal();
//return totalchicken;

Updated Fiddle

Answer 2

您计算总数的代码只执行了一次，在页面加载时，设置了 none 个值，然后就再也没有执行过。

我更新了你的代码：https://jsfiddle.net/uadtscxj/14/

我刚刚添加了一个 subtotal 函数来计算当前总数，然后在您的事件处理函数中调用它，因此总数会更新多次。

function subtotal(){
    var totalchicken =
        (parseInt(document.getElementById("demo").innerHTML) || 0);
    var totalburger =
        (parseInt(document.getElementById("demo1").innerHTML) || 0);
    var totalfries =
        (parseInt(document.getElementById("demo2").innerHTML) || 0);
    var total = 
        totalchicken + totalburger + totalfries
    document.getElementById("demo3").innerHTML = total;
}

Answer 3

而不是绑定到一个给定的 id，这确实是不可扩展的，这里是你的相同代码的简化。更改任何 select 将调用事件侦听器并重新计算总数，并且它限制调用的内容仅限于当前 select 自己的兄弟姐妹。希望对您有所帮助！

$(document).ready(main());


function main() {
  var totalchicken, totalburger, totalfries;
  $('.targetDiv').hide();
  $('.show').click(function() {
    $('.targetDiv').hide();
    $('#div' + $(this).attr('target')).show();
  });

  $('.hide').click(function() {
    $('#div' + $(this).attr('target')).hide();
  });

  $("select").on("change", function() {
    var subTotal = 0;
    var selectList = $(this).parent().find("select");
    selectList.each(function() {
      var thisItemCost = parseInt($(this).find(":selected").attr("value"));
      subTotal += thisItemCost;
    })

    $(".totalCost").text("Your Order Total: $" + subTotal);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  Online Ordering Website Fast Food Edition!
</h1>
<div class="buttons">
  <input type="radio" name="resto" class="show" target="1">Jollibee
  <input type="radio" name="resto" class="show" target="2">Mc Donalds
  <input type="radio" name="resto" class="show" target="3">KFC
  <input type="radio" name="resto" class="show" target="4">Burger King
</div>

<div id="div1" class="targetDiv">
  <h4>
    Jollibee Meals!
  </h4>
  <input type="checkbox">Chicken
  <strong>98 Pesos</strong>
  <select id="jollyoption">
    <option value="0"> </option>
    <option value="98">1</option>
    <option value="196">2</option>
    <option value="294">3</option>
    <option value="392">4</option>
    <option value="490">5</option>
  </select>
  <output id="demo"></output>
  <br>
  <input type="checkbox">Burger
  <strong>130 Pesos</strong>
  <select id="jollyoption1" onclick="">
    <option value="0"> </option>
    <option value="130">1</option>
    <option value="260">2</option>
    <option value="390">3</option>
    <option value="520">4</option>
    <option value="650">5</option>
  </select>
  <output id="demo1"></output>
  <br>
  <input type="checkbox">Fries
  <strong>60 Pesos</strong>
  <select id="jollyoption2">
    <option value="0"> </option>
    <option value="60">1</option>
    <option value="120">2</option>
    <option value="180">3</option>
    <option value="240">4</option>
    <option value="300">5</option>
  </select>
  <output id="demo2"></output>
  <br>
  <p id="demo3"></p>
</div>
<div id="div2" class="targetDiv">
  <h4>
    Mc Donald Meals!
  </h4>
  <input type="checkbox">Chicken
  <strong>79 Pesos</strong>
  <select id="mcDoption1">
    <option value="0"> </option>
    <option value="79">1</option>
    <option value="158">2</option>
    <option value="237">3</option>
    <option value="316">4</option>
    <option value="395">5</option>
  </select>
  <br>
  <input type="checkbox" id="enable2">Burger
  <strong>50 Pesos</strong>
  <select id="mcDoption2">
    <option value="0"> </option>
    <option value="50">1</option>
    <option value="100">2</option>
    <option value="150">3</option>
    <option value="200">4</option>
    <option value="250">5</option>
  </select>
  <br>
  <input type="checkbox">Fries
  <strong>39 Pesos</strong>
  <select id="mcDoption3">
    <option value="0"> </option>
    <option value="39">1</option>
    <option value="78">2</option>
    <option value="117">3</option>
    <option value="156">4</option>
    <option value="195">5</option>
  </select>
  <br>
</div>


<div id="div3" class="targetDiv">
  <h4>
    KFC Meals!
  </h4>
  <input type="checkbox" id="enable">Chicken
  <strong>100 Pesos</strong>
  <select id="kfcoption1">
    <option value="0"> </option>
    <option value="100">1</option>
    <option value="200">2</option>
    <option value="300">3</option>
    <option value="400">4</option>
    <option value="500">5</option>
  </select>
  <br>
  <input type="checkbox" id="enable2">Burger
  <strong>65 Pesos</strong>
  <select id="kfcoption2">
    <option value="0"> </option>
    <option value="65">1</option>
    <option value="130">2</option>
    <option value="195">3</option>
    <option value="260">4</option>
    <option value="320">5</option>
  </select>
  <br>
  <input type="checkbox">Fries
  <strong>35 Pesos</strong>
  <select id="kfcoption3">
    <option value="0"> </option>
    <option value="35">1</option>
    <option value="70">2</option>
    <option value="105">3</option>
    <option value="140">4</option>
    <option value="175">5</option>
  </select>
  <br>
</div>


<div id="div4" class="targetDiv">
  <h4>
    Burger King Meals!
  </h4>
  <input type="checkbox" id="enable">Chicken
  <strong>149 Pesos</strong>
  <select id="bkoption1">
    <option value="0"> </option>
    <option value="149">1</option>
    <option value="298">2</option>
    <option value="447">3</option>
    <option value="596">4</option>
    <option value="745">5</option>
  </select>
  <br>
  <input type="checkbox" id="enable2">Burger
  <strong>110 Pesos</strong>
  <select id="bkoption2">
    <option value="0"> </option>
    <option value="110">1</option>
    <option value="220">2</option>
    <option value="330">3</option>
    <option value="440">4</option>
    <option value="550">5</option>
  </select>
  <br>

</div>
<div class="totalCost">

</div>

获取函数变量

getting variables on function

html

javascript

var

function