Sales Tax Calculator

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.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>

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #F3F3F3; }
#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: 1em;
    float: left; }
#taxCalc input {
    display: block;
    float: left; }
#taxCalc br {
    clear: left; }