输出计算

时间:2014-04-21 14:51:34

标签: javascript html dom

我在w3验证器上验证了这个脚本并且验证没有错误,但是当我尝试计算购物车内的东西时没有输出。我只是想知道问题是什么。

 <script type=text/javascript>
    function shoppingcart()
        {
        var TaxRate=0.10;
        var Tax=0;
        var Subtotal=0;
        var Total=0;

        var quantity=document.getElementById("quantity").value;
        var price=document.getElementById("Choice").value;

        SubTotal=Quantity*Price;
        tax=SubTotal*Taxrate;
        total=SubTotal+tax;

        tax=tax.toFixed(2);
        SubTotal=SubTotal.toFixed(2);
        total=total.toFixed(2);
                <!--data back to form-->
        document.getElementById('subtotal').innerHTML="Subtotal="+subTotal;
        document.getElementById('totalTax').innerHTML="Totaltax="+tax+"(@10)";
        document.getElementById('total'). innerHTML="Total=" +total;

        alert("CheckTotal")
        }
</script>
</head>
<body>
     <script type=text/javascript></script>

    <form OnSubmit="shoppingcart()">
    <h1>Shopping cart</h1>
    Choose option
    <select>

        <option value="">Select </option>
        <option value="$20">"spin classes $20</option>
        <option value="$40"> "swimming lessons $40</option>
        <option value="$10"> Boxersize $10</option>
        <option value="$5"> protein shake $5</option>
    </select>

    <label for="session">Session:</label>
    <input type="text" name="quantity" size="1" id="session">
    <br>
    <hr>
    <div id="Subtotal">Subtotal:</div>
    <div id="Tax">Tax:</div>
    <div id="Total">Total:</div>
    <hr>
    <input type="submit" value="calculate"/>
</form>

4 个答案:

答案 0 :(得分:2)

您尝试撰写的元素不会出现在代码的HTML部分中

其中一些根本不存在,而另一些则有错误的套管

这是我对你的意思的猜测:

document.getElementById('subtotal')应为document.getElementById('Subtotal')(使用大写字母S)以匹配元素的名称

document.getElementById('totalTax')应为document.getElementById('Tax')

document.getElementById('total')应为document.getElementById('Total')

答案 1 :(得分:0)

变量名称区分大小写。您定义quantitypriceTaxRateSubtotal ... 但请使用QuantityPriceTaxrateSubTotal

答案 2 :(得分:0)

你的程序中有很多错误,remenber javascript是casesenstive; 您的获取元素名称代替了document.getElementById("quantity").value;,此处的数量为名称而非 ID
你的错误主要是变量名 数量为数量,价格为价格,TaxRate为税率,小计为SubTotal,数量为数量
检查以下代码我修复了所有错误

<script type=text/javascript>
    function shoppingcart(){
        var TaxRate=0.10;
        var Tax=0;
        var Subtotal=0;
        var Total=0;

        var quantity=Number(document.getElementById("session").value);
        var price=Number(document.getElementById("Choice").value);

        Subtotal=quantity*price;

        tax=Subtotal*TaxRate;

        total=Subtotal+tax;

        Tax=Tax.toFixed(2);

        Subtotal=Subtotal.toFixed(2);

        Total=Total.toFixed(2);
                <!--data back to form-->
        document.getElementById('Subtotal').innerHTML="Subtotal="+Subtotal;
        document.getElementById('Tax').innerHTML="Totaltax="+tax+"(@10)";
        document.getElementById('Total'). innerHTML="Total=" +total;
  }
</script>
</head>
<body>
     <script type=text/javascript></script>
    <form >
    <h1>Shopping cart</h1>
    Choose option
    <select id="Choice">
        <option value="">Select </option>
        <option value="20">"spin classes $20</option>
        <option value="40"> "swimming lessons $40</option>
        <option value="10"> Boxersize $10</option>
        <option value="5"> protein shake $5</option>
    </select>

    <label for="session">Session:</label>
    <input type="text" name="quantity" size="1" id="session">

    <br>
    <hr>
    <div id="Subtotal">Subtotal:</div>
    <div id="Tax">Tax:</div>
    <div id="Total">Total:</div>
    <hr>

    <input type="button" onClick="shoppingcart()" value="calculate"/>
</form>

答案 3 :(得分:0)

我在代码中注意到了一些事情。其中任何一个都可能是个问题。

1)var quantity = document.getElementById(“quantity”)。value;

我没有看到具有id数量的元素。这就是名字,而不是身份证。输入名称数量的id是session。

2)我没有看到名为“choice”的元素id。也许你忘了把它包括在内。请记住,getElementById通过“id”而非“name”查看值。您将需要确保您正在访问正确的“id”。

正如有人提到的那样

document.getElementById('subtotal').innerHTML="Subtotal="+subTotal;
document.getElementById('totalTax').innerHTML="Totaltax="+tax+"(@10)";
document.getElementById('total'). innerHTML="Total=" +total;
某人已经提到这里有问题。小计的ID实际上是小计。一切都区分大小写。我没有看到totaltax的id。我看到一个用于Tax而且我也没有看到总数的id,但是对于Total(请注意大写)。

你的问题似乎在于不匹配的ID。