用户输入的简单计算

时间:2015-03-23 07:47:13

标签: javascript html

这是我第一次处理HTML和javascript,所以请原谅这个简单的问题。我正在尝试计算用户想要购买的水果的成本总成本。它早些时候工作正常但不知何故它停止工作。我可以知道这里有什么问题吗?

<!DOCTYPE html>
<html>
<head>
  <title>My Title</title>
</head>

<body>
    <form name="orderForm" action="orderProcess.php" onsubmit="return validateForm()" method="post">
      <h1>My header</h1>
      <label>User Name: </label>
      <input type="text" name="username"> <br>

      <label>Number of Apples ($0.69 / ea): </label> 
      <input type="text" name="AppleQty" id="AppleQty" oninput="calculateCost()"> <br>

      <label>Number of Oranges ($0.59 / ea): </label>
      <input type="text" name="OrangeQty" id="OrangeQty" oninput="calculateCost()"> <br>

      <label>Number of Bananas ($0.39 / ea): </label>
      <input type="text" name="BananaQty" id="BananaQty" oninput="calculateCost()"> <br>

      <label>Total Cost: $</label>
      <input type="text" name="totalCost" id="totalCost" readonly> <br>
</body>    


<script type="text/javascript">
    function calculateCost()
    {
        var appleQty = document.getElementById("AppleQty");
        var orangeQty = document.getElementById("OrangeQty");
        var bananaQty = document.getElementById("BananaQty");
        if(isNaN(appleQty.value))
        {
            alert('Only Numeric Values Allowed');
            appleQty.value = '';
            appleQty.focus();
            return false;
        }
        else if(isNaN(bananaQty.value))
        {
            alert('Only Numeric Values Allowed');
            bananaQty.value = '';
            bananaQty.focus();
            return false;
        }
        else if(isNaN(orangeQty.value))
        {
            alert('Only Numeric Values Allowed');
            orangeQty.value = '';
            orangeQty.focus();
            return false;
        }
        else
        {
            document.getElementById("totalCost").value = (appleQty.value * 0.69 + orangeQty.value * 0.59 + bananaQty.value * 0.39).toFixed(2);
        }
    }
</script>

0 个答案:

没有答案