Question

我正在为餐馆账单计算器创建一个HTML页面，但我遇到了javascript /输入/表单的问题并且已经停留了一段时间。我提交时，我不确定为什么我的功能不起作用。如果有人有任何想法，我会非常感谢任何帮助！

这是我当前的代码（必须在一个HTML文档中）：

<body>
<h1>Restaurant Bill Calculator</h1>
<br>
<form name="billcalculator" method=post onsubmit="calculateBill()">
    <div class="wrapper">
        <label for="tax">Tax Percent:</label>
        <input type="number" id="taxPercent" min="0" max="100" step=".01">%
        <br>
        <label for="price">Price from the menu:</label>
        <input type="number" id="menuPrice" min="0" max="1000" step=".01">
        <br>
        <label for="tip">Tip Percent:</label>
        <input type="number" id="tipPercent" min="0" max="200" step=".01">%
        <br>
        <input type="submit" onclick="calculateBill()" id="submit" value="Calculate Bill">
        <br>
    </div>
</form>
<p id="display">Please click Calculate Bill after completing form.</p>
<script>
    function calculateBill() {
        var tax = document.getElementById("taxPercent")
        var price = document.getElementById("menuPrice")
        var tip = document.getElementById("tipPercent")
        var taxamount = price * tax;
        var tipamount = price * tip;
        var total = taxamount + tipamount + price;

        if (!tax.checkValidity()) {
            window.alert(tax.validatonMessage);
        }
        if (!price.checkValidity()). {
            window.alert(price.validationMessage);
        }
        if (!tip.checkValidity()) {
            window.alert(tip.validationMessage);
        }
        if (tax.checkValidity() && price.checkValidity() && tip.checkValidity()) {
            document.getElementById("display").innerHTML = "Price: $" + price.toFixed(2) + "\n" + "Tax: $" + taxamount.toFixed(2) + "\n" + "Tip: $" + tip.toFixed(2) + "\n" + "Total: $" + total.toFixed(2);
        }
        return true;
    }
</script>

Answer 1

您需要获取并解析值。

 var tax = parseFloat(document.getElementById("taxPercent").value);
 var price = parseFloat(document.getElementById("menuPrice").value);
 var tip = parseFloat(document.getElementById("tipPercent").value);

Answer 2

由于您的表单中没有任何操作，并且未在任何位置发布，因此您只需从<form>删除发布方法。

您还应该从输入中删除onclick功能。没有理由让onclick和onsubmit处理程序指向同一个函数。

然后将其添加到您的calculateBill功能：

function calculateBill(e) {
    e.preventDefault();

最后，您应该从DOM元素中获取值，如下所示：

var tax = document.getElementById("taxPercent").value;

这些将是字符串，因此您必须use parseInt。

HTML文档中的Javascript函数，我哪里出错了？

2 个答案: