Javascript <--> XHTML 问题

Question

抱歉，我是 Javascript/HTML 的新手。好的，我正在编写一个向用户显示表单的程序。在该表格上，他们输入他们购买的物品的价格，然后单击他们想要的运输方式（标准或加急）。然后他们点击计算，然后它会显示 S&H 价格、税金和订单总额。所以我遇到的问题是能够在 javascript 代码和 html 表单之间进行通信。我们也在使用非常基础的技术，所以我不知道如何做任何高级的事情。代码在这里：

<head>
  <title>  </title>
        <script type="text/javascript">
<!--
    //this will prompt the user to enter the price(s) of their item(s) and add them together to get a 'total' of what they have input so far.

    function calc()
    {
        var iPrice = document.getElementById("iPrice").value;
        iPrice=parseInt(iPrice);
        if(iPrice <=0)
            alert("Please enter a number greater than 0");

        var shipMeth=document.getElementById("shipMethS").checked;

        var shippingPrice;
        if(shipMeth)
            {
                if(iPrice<0 && iPrice <25)
                    shippingCost =4.50;
                else if(iPrice <50)
                    shippingCost=7;
                else
                    shippingCost=10.25;
            }
        else
            {
                if(iPrice<0 && iPrice <25)
                    shippingCost =9.50;
                else if(iPrice <50)
                    shippingCost=12;
                else
                    shippingCost=15.25;
            }   
        shippingCost=parseFloat(shippingCost);
        var tax = iPrice*.06;
        tax=parseFloat(tax);
        var totalPrice=iPrice+shippingCost+tax;
        document.getElementById("totalPrice").value=totalPrice;


    }

    -->
    </script>

 <body>
<form>
    <p><label> Price: $
        <input name="iPrice"id="iPrice"type="text"size="25"/>
    </label>
    </p>

    <p>Shipping Method (Please only select one)</p>

    <p><Label>Standard
        <input name="CB"type="checkbox"value="Standard"id="shipMethS"/>
        </label>
       <label>Expedited 
        <input name="CB"type="checkbox"value="Expedited"id="shipMethE"/>
        </label>
    </p>

    <p><label>S&H Charges:
            <input name="S&H Charges" type="text" size="25" readOnly />
        </label>
    </p>

    <p><label>Tax (@6.00%):
            <input name="taxCharges" type="text" size="25" readOnly />
        </label>
    </p>

    <p><label>Total Price:
            <input name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
        </label>
    </p>
    <p>
            <input type="button"value="Calculate"onClick="calc()"/>
            <input type="reset"value="Clear"/>
    </p>







</form>

Answer 1

如果你说的是这整件事，那么你错过了很多东西来使它起作用，看看我对它所做的所有更改。

<html>
<head>
      <title>  </title>
 <script type="text/javascript">
<!--
        //this will prompt the user to enter the price(s) of their item(s) and add them together to get a 'total' of what they have input so far.
-->

        function calc()
        {
            var iPrice = document.getElementById("iPrice").value;
            iPrice=parseInt(iPrice);
            if(iPrice <=0)
                alert("Please enter a number greater than 0");

            var shipMeth=document.getElementById("shipMethS").checked;

            var shippingPrice;
            if(shipMeth)
                {
                    if(iPrice<0 && iPrice <25)
                        shippingCost =4.50;
                    else if(iPrice <50)
                        shippingCost=7;
                    else
                        shippingCost=10.25;
                }
            else
                {
                    if(iPrice<0 && iPrice <25)
                        shippingCost =9.50;
                    else if(iPrice <50)
                        shippingCost=12;
                    else
                        shippingCost=15.25;
                }   
            shippingCost=parseFloat(shippingCost);
            var tax = iPrice*.06;
            tax=parseFloat(tax);
            var totalPrice=iPrice+shippingCost+tax;
            document.getElementById("totalPrice").value=totalPrice;


        }
        </script>  
</head>

<body>
<form>
    <p><label> Price: $
        <input name="iPrice" id="iPrice" type="text" size="25"/>
    </label>
    </p>

    <p>Shipping Method (Please only select one)</p>

    <p><Label>Standard
        <input name="CB" type="checkbox" value="Standard" id="shipMethS"/>
        </label>
       <label>Expedited 
        <input name="CB" type="checkbox" value="Expedited" id="shipMethE"/>
        </label>
    </p>

    <p><label>S&H Charges:
            <input name="S&H Charges" type="text" size="25" readOnly />
        </label>
    </p>

    <p><label>Tax (@6.00%):
            <input name="taxCharges" type="text" size="25" readOnly />
        </label>
    </p>

    <p><label>Total Price:
            <input id="totalPrice" type="text" size="25" value="totalPrice" readOnly />
        </label>
    </p>
    <p>
            <input type="button" value="Calculate" onClick="calc()"/>
            <input type="reset" value="Clear"/>
    </p>
</body>
</html>

Answer 2

<input name="totalPrice" type="text" size="25" value="totalPrice" readOnly />

需要

<input id="totalPrice" name="totalPrice" type="text" size="25" value="totalPrice" readOnly />

如果你想使用 "getElementById" document.getElementById("totalPrice").value=totalPrice;

然后在函数末尾添加其他字段：

document.getElementById("taxCharges").value=tax;

document.getElementById("shCharges").value=shippingCost;

您绝对不需要脚本中的评论标签，但它应该不会有任何伤害。看起来您可以使用更多验证来确保输入中有数字。

Javascript <--> XHTML 问题

Javascript <--> XHTML troubles

javascript

xhtml