Javascript运费计算器不抓取输入答案

【问题标题】：Javascript Shipping Calculator Not Grabbing InputJavascript运费计算器不抓取输入
【发布时间】：2013-04-14 13:30:27
【问题描述】：

我得到了一生的头痛。我不太擅长 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>

【问题讨论】：

标签： javascript input calculator shipping

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

【讨论】：

【解决方案2】：

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

您应该在单击提交时调用总计计算，f.ex。这样：

<!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>

【讨论】：

Ohman，非常感谢，这行得通！我觉得自己没有这样做很荒谬。
这是一种快速且简单的解决方案 :) 如果你要认真对待 js，请尝试玩 f.ex。使用像@Ghodmode 这样的jQuery 推荐
内联javascript不是一个好习惯。如果您要认真学习 javascript，那么您需要学习 javascript，然后根据经验决定何时适合使用 3rd 方库（下划线、jquery、协议、mootools、dojo 等）。
@Xotic750 我完全同意，这不是最佳做法。

【解决方案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 这样的库确实更容易做到这一点。它还处理了附加事件处理程序的浏览器实现之间的差异。

【讨论】：