簡體   English   中英

JavaScript運送計算器無法獲取輸入

[英]Javascript Shipping Calculator Not Grabbing Input

我正在經歷一生的頭痛。 我對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>

這是一個可能對您有幫助的樣品

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

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>

您需要附加一個事件處理程序,該事件處理程序在用戶輸入值時觸發。

<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之類的庫,這種事情確實更容易。 它還處理瀏覽器實現之間用於附加事件處理程序的差異。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM