Question

我正在研究“Murcah的Javascript和DOM脚本”一书。我正在完成第一个示例，即创建销售税应用程序。

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

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();
}

Answer 1

您的代码存在一些问题：

（1）在jsFiddle中，你已经在使用window.onload所以在左窗格中你不需要指定onload，只需将代码包装在head或body中即可。此外，在jsFiddle中不需要包含html和head以及所有内容。

（2）isNan不是函数。使用isNaN。

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

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

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

Answer 2

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

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();

销售税申请不计算销售税

2 个答案: