计算故障-Javascript形式



我对Javascript和这个网站很陌生,但我正在寻找我的一个项目的帮助。

到目前为止,它有点粗糙,还不完整,但在我弄清楚如何真正显示计算结果之前,我无法继续前进。如果我能得到帮助,弄清楚为什么第一个苹果总数不是计算的,那就太好了!

这是我的完整(工作进行中)html页面:

    <html>
     <head>
            <title>Order Form</title>
            <style>
                    .inBox { width:60px; text-align:right; border: 1px solid green; }
                    .thWide { width:80px; text-align:right; }
            </style>
            <script type="text/javascript">
                    function compute()
                    {
                            // Pointers to red asterisks
                            var spnA = document.getElementById("spnA");
                            var spnP = document.getElementById("spnP");
                            var spnG = document.getElementById("spnG");
                            // Assume no errors yet
                            var message = "";
                            spnL.style.display = "none";
                            spnW.style.display = "none";
                            spnH.style.display = "none";

                            var apple = form1.txtA.value;
                            if (apple == "")
                                    apple = 1;
                            else
                                    apple = parseFloat(apple);
                            if (   isNaN(apple)   )
                            {
                                    spnA.style.display = "inline";
                                    message = message + "Apple is badn";
                                    form1.txtA.select();
                            }
                            var pear = form1.txtP.value;
                            if (pear == "")
                                    pear = 1;
                            else
                                    pear = parseFloat(pear);
                            if (   isNaN(pear)   )
                            {
                                    spnP.style.display = "inline";
                                    message = message + "Pear is badn";
                                    form1.txtP.select();
                            }
                            var grape = form1.txtG.value;
                            if (grape == "")
                                    grape = 1;
                            else
                                    grape = parseFloat(grape);
                            if (   isNaN(grape)   )
                            {
                                    spnG.style.display = "inline";
                                    message = message + "Grape is badn";
                                    form1.txtG.select();
                            }
                            if (  message != "" )
                            {
                                    // Show error and clear subA
                                    alert(message);
                                    form1.txtsubA.value = "";
                            }
                            else
                            {
                                    // Compute subA
                                    var subA = length * 5.49;
                                    form1.txtsubA.value = subA;
                                    form1.txtA.select();
                            }
                    }
                    </script>
    </head>
    <body>
            <form id="form1">
                    <table border="2">
                            <tr><th colspan="4">Volume Box</th></tr>
                            <tr><th>Quantity</th><th>Item</th><th>Unit Prics</th><th>Totals</th></tr>
                            <tr>
                                    <th class="thWide">
                                            <span id="spnA" style="color:red; font-weight:bold; display:none;">*</span>
                                            <input type="text" id="txtA" class="inBox" tabindex="1" autofocus />
                                    </th><td>Apples</td><td>$5.49</td>
                                    <th style="width:80px;"><input type="text" id="txtsubA" class="inBox" readonly /></th>
                            </tr><tr>
                                    <th class="thWide">
                                            <span id="spnP" style="color:red; font-weight:bold; display:none;">*</span>
                                            <input type="text" id="txtP" class="inBox" tabindex="1" autofocus />
                                    </th><td>Pears</td><td>$6.49</td>
                                    <th style="width:80px;"><input type="text" id="txtsubP" class="inBox" readonly /></th>
                            </tr><tr>        
                                    <th class="thWide">
                                        <span id="spnG" style="color:red; font-weight:bold; display:none;">*</span>
                                         <input type="text" id="txtG" class="inBox" tabindex="1" autofocus />
                                    </th><td>Grapes</td><td>$7.49</td>
                                    <th style="width:80px;"><input type="text" id="txtsubG" class="inBox" readonly /></th>
                             </tr>
                            <tr><th colspan="4">
                                    <input type="button" value="Compute" onclick="compute();" tabindex="4" />
                            </th></tr>
                    </table>
            </form>
    </body>
    </html>

浏览器中的控制台在诊断任何问题时都非常有用。例如,您的代码在控制台中给出了以下错误:

test.html:18 Uncaught ReferenceError: spnL is not defined

我想你的意思是:

spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";

将:

spnA.style.display = "none";
spnP.style.display = "none";
spnG.style.display = "none";

至于你的问题,问题就在这一部分:

// Compute subA
var subA = length * 5.49;

长度在任何地方都没有定义,你的意思可能是:

// Compute subA
var subA = apple * 5.49;

然后你可能还想更改的线路

form1.txtsubA.value = subA;

form1.txtsubA.value = subA.toFixed(2);

其将仅显示小数点后2位。

清除(或注释掉):

spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";

收集表格中提供的值(添加".value"):

// Pointers to red asterisks
var spnA = document.getElementById("txtA").value;
var spnP = document.getElementById("txtP").value;
var spnG = document.getElementById("txtG").value;

声明值的交换长度:

// Compute subA
var subA = spnA * 5.49;

尽情享受吧!

最新更新