销售税应用程序不计算销售税

Sales Tax Application not calculating sales tax

本文关键字：计算应用程序更新时间：2023-09-26

我正在阅读"Murcah's Javascript and DOM scripting"一书。我正在完成第一个示例，即创建销售税应用程序。

这是我的小提琴，让我知道我做错了什么：

http://jsfiddle.net/chrisjamez/2vjqc/1/

.HTML

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE>Sales Tax Calculator</TITLE>
        <link rel="stylesheet" type="tect/css" href="sales_tax.css" />
        <script type="text/javascript" src="sales_tax.js"></script>
    </HEAD>
    <BODY>
        <DIV id="content">
            <h1>Sales Tax Calculator</h1>
            <p>Enter the values below and click "Calculate".</p>
            <div id="taxCalc">
                <label for="subtotal">Subtotal:</label>
                <input type="text" id="subtotal" />
                <br/>
                <label for="taxRate">Tax Rate:</label>
                <input type="text" id="taxRate" />%
                <br/>
                <label for="salesTax">Sales Tax:</label>
                <input type="text" id="salesTax" disabled="disabled" />
                <br/>
                <label for="total">Total:</label>
                <input type="text" id="total" disabled="disabled" />
                <br/>
                <label>&nbsp;</label>
                <input type="button" id="calculate" value="Calculate" />
                <br/>
            </div>
        </DIV>
    </BODY>
</HTML>

.CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #333366;
}
#content {
    width: 450px;
    margin: 10px auto;
    padding: 5px 20px;
    background: white;
    border: thin solid black;
}
#salesTax, #total {
    color: black;
}
#taxCalc label {
    display: block;
    width: 6em;
    text-align: right;
    padding-right: lem;
    float: left;
}
#taxCalc input {
    display: block;
    float: left;
}
#taxCalc br {
    clear: left;
}

JavaScript

var $ = function (id) {
    return document.getElementById(id);
}
var calculate_click = function () {
    var subtotal = parseFloat($("subtotal").value);
    var taxRate = parseFloat($("taxRate").value);
    $("salesTax").value = "";
    $("total").value = "";
    if (isNaN(subtotal) || subtotal < 0) {
        alert("Subtotal must be a number that is zero or more!");
    } else if (isNan(taxRate) || taxRate < 0) {
        alert("Tax Rate must be a number that is zero or more!");
    } else {
        var salesTax = subtotal * (taxRate / 100);
        salesTax = parseFloat(salesTax.toFixed(2));
        var total = subtotal + salesTax;
        $("salesTax").value = salesTax;
        $("total").value = total.toFixed(2);
    }
}
window.onload = function () {
    $("calculate").onclick = calculate_click;
    $("subtotal").focus();
}

您的代码存在几个问题：

(1(在jsFiddle中，您已经在使用window.onload因此在左窗格中您不需要指定onload，只需将代码包装在头部或身体中即可。此外，在jsFiddle中时，无需包含html和head以及所有这些东西。

(2(isNan不是一个函数。使用 isNaN .

更改此内容：else if (isNan(taxRate) || taxRate < 0)

至： else if (isNaN(taxRate) || taxRate < 0)

检查这个更新的小提琴：http://jsfiddle.net/2vjqc/4/

不是最好的答案，但我在我的小提琴中修复了代码

http://jsfiddle.net/2vjqc/9/

var $ = function (id) {
    return document.getElementById(id);
}
var calculate_click = function () {
    var subtotal = parseFloat($("subtotal").value);
    var taxRate = parseFloat($("taxRate").value);
    $("salesTax").value = "";
    $("total").value = "";
    if (isNaN(subtotal) || subtotal < 0) {
        alert("Subtotal must be a number that is zero or more!");
    } else if (isNaN(taxRate) || taxRate < 0) {
        alert("Tax Rate must be a number that is zero or more!");
    } else {
        var salesTax = subtotal * (taxRate / 100);
        salesTax = parseFloat(salesTax.toFixed(2));
        var total = subtotal + salesTax;
        $("salesTax").value = salesTax;
        $("total").value = total.toFixed(2);
    }
}
$("calculate").onclick = function(){calculate_click();};
$("subtotal").focus();