Javascript 运费计算器不抓取输入

标签 javascript input calculator

我这辈子都头疼了。我不太擅长 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 运费计算器不抓取输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16133690/

相关文章:

Java/Groovy Socket - 以非阻塞方式检测正在关闭的套接字

java - 当我运行 switch case 并选择一个选项时,它将不断循环该选项

javascript - 如何让模态框在 x 秒内关闭?

javascript - Cloudinary 文件上传错误

javascript - 如何使用 css 或 jq 在 laravel 中创建图像 slider

python - 按下 escape 时取消输入

javascript - AngularJS $http.get 请求不在 Ionic 中显示数据

python - Tkinter 输入的第一个字母

javascript - 在 JavaScript 中使用超限序数