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いるため、左側のペインで onload を指定する必要はなく、head または body でコードをラップするだけで済みます。また、jsFiddle 内にhtmlandなどを含める必要はありません。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 に答える