0

我得到了一生的头痛。我不太擅长 Javascript，所以我不知道发生了什么。我应该编写一个文本框，当输入并提交价格时，它将计算运费并告诉您总数。除了没有设置键入的值之外，一切正常。因此，无论输入什么，价格似乎都永久设置为 NaN。我究竟做错了什么？丁：

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

3 回答 3

2

这是一个可以帮助您的示例

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

于 2013-04-21T17:07:33.417 回答
1

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>
于 2013-04-21T17:09:06.743 回答
0

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

<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 这样的库，这种事情真的更容易。它还处理附加事件处理程序的浏览器实现之间的差异。

于 2013-04-21T17:18:01.850 回答