Fatal编程技术网

Javascript 输出计算结果

javascript html dom

Javascript 输出计算结果,javascript,html,dom,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=docu

我在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>


函数shoppingcart（）
{
风险值税率=0.10；
var税=0；
var小计=0；
var合计=0；
var数量=document.getElementById（“数量”）.value；
var price=document.getElementById（“选择”）.value；
小计=数量*价格；
税=小计*税率；
合计=小计+税金；
tax=tax.toFixed（2）；
小计=固定的小计（2）；
总计=总计。toFixed（2）；
document.getElementById（'subtotal'）。innerHTML=“subtotal=”+subtotal；
document.getElementById（'totalTax'）.innerHTML=“totalTax=“+tax+”（@10）”；
document.getElementById（'total'）。innerHTML=“total=”+total；
警报（“检查总数”）
}
购物车
选择选项
挑选
“旋转类20美元
“游泳课40美元
拳击赛10美元
蛋白质奶昔5美元
会议：




小计：
税款：
总数：
您试图写入的元素没有出现在代码的HTML部分中

有些根本不存在，有些外壳错误

我猜你的意思是：

document.getElementById（'subtotal'）
应为
document.getElementById（'subtotal'）
（大写字母S）以匹配元素名称

document.getElementById（'totalTax'）
应该是
document.getElementById（'Tax'）

及

document.getElementById（'total'）
应该是
document.getElementById（'total'）
变量名区分大小写。您可以定义
数量
，
价格
，
税率
，
小计
。。。
但是使用
数量
，
价格
，
税率
，
小计
，程序中有很多错误，请记住javascript是区分大小写的； 将元素名称替换为id
document.getElementById（“数量”）.value此处数量为名称而非id

您的错误主要在变量名中
数量作为数量，价格作为价格，税率作为税率，小计作为小计，数量作为数量

检查下面的代码，修复所有错误



函数shoppingcart（）{
风险值税率=0.10；
var税=0；
var小计=0；
var合计=0；
var数量=编号（document.getElementById（“session”）.value）；
var价格=编号（document.getElementById（“选择”）.value）；
小计=数量*价格；
税=小计*税率；
合计=小计+税金；
Tax=Tax.toFixed（2）；
小计=固定的小计（2）；
总计=总计。toFixed（2）；
document.getElementById（'Subtotal'）。innerHTML=“Subtotal=”+Subtotal；
document.getElementById（'Tax'）.innerHTML=“Totaltax=“+Tax+”（@10）”；
document.getElementById（'Total'）。innerHTML=“Total=”+Total；
}
购物车
选择选项
挑选
“旋转类20美元
“游泳课40美元
拳击赛10美元
蛋白质奶昔5美元
会议：




小计：
税款：
总数：



我在代码中注意到了几点。任何一个都可能是个问题

1） var数量=document.getElementById（“数量”）.value

我没有看到id为quantity的元素。这是名称，而不是id。输入名称数量的id是会话

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，我也没有看到total的id，但用于total（注意大写）


您的问题似乎在于ID不匹配。
返回表单的数据只是一个注释。谢谢我现在检查问题所在。您正在尝试获取ID数量和选项的元素，但HTML中没有此类元素。查看浏览器中的控制台（Chrome中的F12）应该向您显示问题。id区分大小写。感谢您的时间，这非常有帮助。这些小错误一直困扰着我

document.getElementById('subtotal').innerHTML="Subtotal="+subTotal;
document.getElementById('totalTax').innerHTML="Totaltax="+tax+"(@10)";
document.getElementById('total'). innerHTML="Total=" +total;