如何通过外部JavaScript来计算快餐订购计划的总价格

时间:2017-02-25 15:55:12

标签: javascript html

我是论坛的新手,也是javascript的新手。为了直截了当,问题是它不会计算何时未选择/订购一个项目。当所有这些都被选中时它工作正常,但当缺少一个时,它只显示NaN。我试图改变代码;从一点一滴到整个事情,但我似乎无法得到它。有一次,当我点击计算按钮时,它根本不显示任何内容。我已经整整一个星期了,一次又一次地研究和重新开始。希望你们能分享一些关于如何做到这一点的技巧,见解或解释。我真的很陌生。

javascript是外部的。

这是我的html&外部javascript(我很抱歉,如果我的代码很乱,我真的不确定如何很好地解决问题):

function compute() {

  var a1 = parseInt(document.getElementById("regburg").value);
  var b1 = parseInt(document.getElementById("chburg").value);
  var c1 = parseInt(document.getElementById("spclburg").value);
  var d1 = parseInt(document.getElementById("regfrs").value);
  var e1 = parseInt(document.getElementById("lrgfrs").value);
  var f1 = parseInt(document.getElementById("xlfrs").value);
  var g1 = parseInt(document.getElementById("regdr").value);
  var h1 = parseInt(document.getElementById("meddr").value);
  var i1 = parseInt(document.getElementById("lrgdr").value);



  if (a1 < 0 || b1 < 0 || c1 < 0 || d1 < 0 || e1 < 0 || f1 < 0 || g1 < 0 || h1 < 0 || i1 < 0) {

    document.getElementById("output").innerHTML = "ERROR";

  } else {
    var a2 = 0;
    var b2 = 0;
    var c2 = 0;
    var d2 = 0;
    var e2 = 0;
    var f2 = 0;
    var g2 = 0;
    var h2 = 0;
    var i2 = 0;

    var a2 = a1 * 27;
    var b2 = b1 * 45;
    var c2 = c1 * 70;
    var d2 = d1 * 25;
    var e2 = e1 * 37;
    var f2 = f1 * 45;
    var g2 = g1 * 20;
    var h2 = h1 * 30;
    var i2 = i1 * 35;

    var x = a2 + b2 + c2 + d2 + e2 + f2 + g2 + h2 + i2
    document.getElementById("output").innerHTML = "Total =" + x;

  }
}
}

function change() {
  var y = parseInt(document.getElementById("pay").value);

  var total = y - x;

  document.getElementById("output").innerHTML = total;
}
<html>

<head>
  <title> </title>
</head>

<body>

  <h1> Ordering Program </h1>
  <form>
    <p><br> Please input the quantity of your order.
      <br><br>&emsp;&emsp;&emsp;&emsp;B U R G E R S </p>

    Regular Burger: &emsp;
    <input type="text" id="regburg"> &emsp;
    <br><br> Cheeseburger: &emsp;
    <input type="text" id="chburg"> &emsp;
    <br><br> Special Burger: &emsp;
    <input type="text" id="spclburg">
    <br><br><br>

    <p>&emsp;&emsp;&emsp;&emsp;F R I E S </p>

    &emsp;Regular Fries: &emsp;
    <input type="text" id="regfrs"> &emsp;
    <br><br> &emsp;Large Fries: &emsp;&emsp;
    <input type="text" id="lrgfrs"> &emsp;
    <br><br> Extra Large Fries: &emsp;
    <input type="text" id="xlfrs">
    <br><br><br>

    <p>&emsp;&emsp;&emsp;&emsp;SOFTDRINKS </p>

    Regular Drink: &emsp;
    <input type="text" id="regdr"> &emsp;
    <br><br> Medium Drink: &emsp;
    <input type="text" id="meddr"> &emsp;
    <br><br> Large Drink: &emsp;
    <input type="text" id="lrgdr">
    <br><br><br>
  </form>

  <P id="output"> </P>
  <script src="cmpt.js">
  </script>



  <input type="submit" onclick="compute();return false;" value="Compute">
  <br><br>

  <form>
    Payment:
    <input type="text" id="pay">
  </form>

  <input type="submit" onclick="change();return false;" value="Enter">



</body>

</html>

1 个答案:

答案 0 :(得分:0)

parseInt无法将输入转换为数字时(例如因为它是空字符串),它将返回NaN。

您可以编写自己的替换函数,该函数将返回-1,以便检查所有变量的< 0是否有效。

function parseIntOrMinus1(input)
{
    var result = parseInt(input);
    if(Number.isNaN(result))
    {
        result = -1;
    }

    return result;
}

现在只需在代码中使用parseIntOrMinus1代替parseInt

如果您想将空输入字段视为&#34; 0&#34;,只需使用此版本:

function parseIntOrMinus1(input)
{
    var result;

    if(input == '')
    {
        result = 0;
    }
    else 
    {
        result = parseInt(input);

        if(Number.isNaN(result))
        {
            result = -1;
        }
    }

    return result;
}