麻烦计算 - Javascript 表单答案

【问题标题】：Trouble computing - Javascript form麻烦计算 - Javascript 表单
【发布时间】：2016-08-06 13:43:04
【问题描述】：

我对 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 bad\n";
                                    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 bad\n";
                                    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 bad\n";
                                    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>

【问题讨论】：

您能否更新您的问题并添加示例输入、您收到的输出以及您希望收到的输出。
你还没有定义 spnL, spnW, spnH

标签： javascript forms computation

【解决方案1】：

浏览器中的控制台对于诊断任何问题非常有帮助。例如，您的代码在控制台中出现此错误：

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 位小数。

【讨论】：

【解决方案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;

尽情享受吧！

【讨论】：