0

我正在阅读“Murcah 的 Javascript 和 DOM 脚本”一书。我正在处理第一个示例，它正在创建一个销售税应用程序。

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

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

2 回答 2

0

您的代码有几个问题：

(1) 在 jsFiddle 中，您已经window.onload在左侧窗格中使用了 so，您无需指定 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/

于 2013-10-10T13:56:51.947 回答
0

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

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();
于 2013-10-10T14:08:54.903 回答