Trouble computing - Javascript form

Question

I'm very new to Javascript and this website, but I'm looking for help on a project of mine.

It's a little rough so far and not complete, but I can't move on until I figure out how to actually get the computations to show up. If I could get help figuring out why the first apple total isn't computing, that would be great!

Here's my full (work in progress) html page:

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

Can you please update your question and add an example input, the output you receive and the output you expect to receive. — devlin carnate, Apr 14 '16 at 19:58

score 0 · Answer 1 · answered Apr 14 '16 at 20:03

The console in your browser can be very helpful in diagnosing any problems. For example, your code gives this error in the console:

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

I assume you meant for this part:

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

to be:

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

As for your problem, the issue is in this part:

// Compute subA
var subA = length * 5.49;

Length isn't defined anywhere, you probably mean:

// Compute subA
var subA = apple * 5.49;

And then you will also probably want to change the line after that from

form1.txtsubA.value = subA;

to

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

which will only show 2 decimal places.

score 0 · Answer 2 · answered Apr 14 '16 at 20:06

Get rid of (or comment out):

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

Collect the values provided in the form (add ".value"):

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

Swap length for declared values:

// Compute subA
var subA = spnA * 5.49;

And enjoy!

Trouble computing - Javascript form

2 Answers2