【问题标题】:getting variables on function获取函数变量
【发布时间】:2017-04-21 19:42:13
【问题描述】:

我有点在制作自己的网站,但只是提供一些功能,我已经在苦苦挣扎了……这个网站是一个在线食品订购。我需要获得食物的总和……但我无法使价值出来即使我使用返回的功能......有人帮我吗?我不太擅长 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;

如果您有时间运行它...每次我下 1 家 4 家餐厅的订单数量(选择 jollibee PS:尚未编辑其他餐厅)我得到那个 NaN 因为我无法获得变量和他们的价值观回到主体,所以我可以把总数加起来然后打印出来。有人可以帮我解决这个问题吗?提前谢谢你

【问题讨论】:

  • 您的链接中的代码有一个错误-您需要在开始时使用$,对于$(document).ready(main())
  • 1.您将无法从外部访问函数内部定义的变量。变量应该在外面。 2. 主体中的代码实际上只运行一次,除非你安排它或以监听器的形式添加。
  • 我已经在外面做了变量,但是我在函数内计算的数字即使我使用 return 也不会输出......你有更好的逻辑流程可以分享给我

标签: javascript html function var


【解决方案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

【讨论】:

  • 该死,我发布了同样的解决方案,我有点太晚了。不过你的更好,你可以使用全局总变量,我每次都从 DOM 中读取它们。
  • @Vnzlrnz 不建议大量变量污染全局作用域,查看这个帖子:stackoverflow.com/a/43480517/2827823
  • 对不起,我还在学习 java 脚本……但我正在努力!
【解决方案2】:

您用于计算总数的代码仅在页面加载时执行一次,此时未设置任何值,然后再也不会执行。

我更新了你的代码: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;
}

【讨论】:

  • 谢谢你,我很抱歉哈哈,我只是从几天前学到的碎片中构建......
【解决方案3】:

而不是绑定到一个给定的 id,这确实是不可扩展的,这是您简化的相同代码。更改 ANY 选择将调用事件侦听器并重新计算总数,并将调用的内容限制为仅当前选择自己的兄弟姐妹。希望对您有所帮助!

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-09-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-15
    相关资源
    最近更新 更多