JavaScript运送计算器无法获取输入

Question

我正在经历一生的头痛。 我对Javascript不太了解，所以不知道发生了什么。 我应该在编码一个文本框，当输入价格并提交价格时，它将计算运费并告诉您总额。 除了未设置键入的值外，其他所有操作均正常。 因此，无论输入什么价格，价格似乎都永久固定为NaN。 我究竟做错了什么？ D：

<!DOCTYPE html>
<html>
  <head>
    <title>Untitled Document</title>
  </head>
  <body>
    <form method="post" name="number" onsubmit='window.alert("Your total is $" + total + ".");'>
      <input type="text" name="purchasePrice" placeholder="0.00" />
      <input type="submit" value="submit" />
    </form>
    <script>
      /* <![CDATA[ */
      var price = parseFloat(document.getElementsByTagName("input")[0].value);
      var shipping = parseFloat(calculateShipping(price));
      var total = price + shipping;
      function calculateShipping(price) {
        if (price <= 25) {
          return 1.5;
        } else {
          return price * 10 / 100
        }
      }
      /* ]]> */
    </script>
  </body>
</html>

Answer 1

这是一个可能对您有帮助的样品

<input id="amount" type="text" name="purchasePrice" placeholder="0.00" />
<input id="submit" type="submit" value="submit" />

var amount = document.getElementById("amount");
var submit = document.getElementById("submit");

function calculateShipping() {
    var price = parseFloat(amount.value) || 0;

    if (price <= 25) {
        alert("Your total is $" + 1.5);
    } else {
        alert("Your total is $" + (price * 10 / 100));
    }
}

submit.addEventListener("click", calculateShipping, false);

在jsfiddle上

Answer 2

JavaScript代码在知道价格之前就开始运行...所以，任何*，+ NaN都是... NaN。

单击提交时，您应该调用总计的计算，例如。 这条路：

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>

</head>

 <body>

<form method="post" name="number" onsubmit='calculateTotal()'>
<input type="text" name="purchasePrice" placeholder="0.00" />
<input type="submit" value="submit" />
</form>

<script>
/* <![CDATA[ */

function calculateTotal() {
    var price = parseFloat(document.getElementsByTagName("input")[0].value);
    var shipping = parseFloat(calculateShipping(price));
    var total = price+shipping;

    window.alert("Your total is $" + total + ".");
}


function calculateShipping(price) {
    if (price <= 25) {
        return 1.5; }
    else {
        return price * 10/100 }
    }

/* ]]> */
 </script>

 </body>

 </html>

Answer 3

您需要附加一个事件处理程序，该事件处理程序在用户输入值时触发。

<form method="post" name="number" onsubmit='window.alert("Your total is $" + total + ".");'>
<label for="purchasePrice">Price:</label>
<input type="text" name="purchasePrice" id="purchasePrice" placeholder="0.00" />
<br>
<label for="shipping">Shipping:</label>
<input type="text" name="shipping" id="shipping" disabled>
<!-- <input type="submit" value="submit" /> -->
</form>

<script>
    var price;
    var shipping = parseFloat(calculateShipping(price));
    var total = price+shipping;

    function calculateShipping(price) {
        if (price <= 25) {
            return 1.5; }
        else {
            return price * 10/100;
        }
    }

    var pp = document.getElementById("purchasePrice");
    pp.onkeyup = function(e){
        price = calculateShipping(this.value);
        document.getElementById("shipping").value = price;
    };
</script>

使用jQuery之类的库，这种事情确实更容易。 它还处理浏览器实现之间用于附加事件处理程序的差异。

JavaScript运送计算器无法获取输入

问题描述

3 个解决方案

解决方案1
2 2013-04-21 17:07:33

解决方案2
1

解决方案3
0

JavaScript运送计算器无法获取输入

问题描述

3 个解决方案

解决方案1 2 2013-04-21 17:07:33

解决方案2 1

解决方案3 0

解决方案1
2 2013-04-21 17:07:33

解决方案2
1

解决方案3
0