Javascript - I created a form with multiple values, but only one is calculating?

Question

I'm not sure why, but only oranges seems to calculate in the form I created, but the other fruits I specified don't. I have the each .value specified for each fruit. The form for all fruits are logically identical from what I can see, so I don't understand why I'm not getting result from watermelon or pineapple.

<?xml version = "1.0"?>

<html xmlns = "http://www.w3.org/1999/xhtml"> 
<head> 

<title> Purchase Orange </title>
    <!-- Script for the event handlers --> 

        <script type = "text/javascript">
            // The event handler function to compute the cost

            function computeCost() {
                var orange = document.getElementById("orange").value;
                // Compute the cost
                document.getElementById("cost").value = orange * 1.99;


                var watermelon = document.getElementById("Watermelon").value;
                document.getElementById("cost").value = watermelon * 4.99;

                var pineapple = document.getElementById("Pineapple").value;
                document.getElementById("cost").value = pineapple * 4.69;



            } //* end of computeCost 
        </script>

</head> 

<body> 

<form>
    Orange $1.99/lb <input type = "text" id = "orange" size ="3" />
    <br />

</form> 

<form>
    Watermelon $4.99/lb <input type = "text" id = "watermelon" size ="3" />
    <br />

</form> 

<form>
    Pineapple $4.69/lb <input type = "text" id = "pineapple" size ="3" />
    <br />
</form>

<form>      
    Total Cost is <input type = "text" id = "cost" size ="5" />
    <br />
</form>

<form>      
    <input type = "button" value = "Total Cost" onclick="computeCost();"/>
</form> 

</body>

I want to get total for each fruit in the field. So far, the only total that calulates is orange, but not the other fruits. There are fields for each fruit when you run the code, each field has a box where you can input the quantity. Orange calculates with the 1.99 price I specified, and the calculation goes into the total field I created. But it doesn't do that for Pineapple and Watermelon. — user3577397
– user3577397, Commented Oct 6, 2014 at 4:30
you have to sumup all your variables after making id correct. — Suchit kumar
– Suchit kumar, Commented Oct 6, 2014 at 4:37

Sameera Thilakasiri · Accepted Answer · 2014-10-06 04:32:09Z

2

Found a simple/capital issue in your IDs, did a small fiddle, check this out.

       function computeCost() {
            var orange = document.getElementById("orange").value;
            // Compute the cost
            var a = orange * 1.99;


            var watermelon = document.getElementById("watermelon").value;
            var b = watermelon * 4.99;

            var pineapple = document.getElementById("pineapple").value;
            var c = pineapple * 4.69;

            var total = eval(a + b + c);

            document.getElementById("cost").value = total;                


        } //* end of computeCost

answered Oct 6, 2014 at 4:32

Sameera Thilakasiri

9,51810 gold badges54 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3577397 Over a year ago

Ah Thanks! I see what I did wrong. putting a, b and c and assigning it to each fruit makes it easier. And then eval (a+b+c) helps with the total. Thanks :) I wish I could give upvotes.

Suchit kumar · Accepted Answer · 2014-10-06 04:36:14Z

1

the problem is you are using wrong Id's:

use:

var watermelon = document.getElementById("watermelon").value;
 var pineapple = document.getElementById("pineapple").value;

instead of:

     var watermelon = document.getElementById("Watermelon").value;
        var pineapple = document.getElementById("Pineapple").value;

display sum of all the calculated values.like this:

var grandtotal =pineapple+ watermelon+orange;
        document.getElementById("cost").value = grandtotal;

edited Oct 6, 2014 at 4:36

answered Oct 6, 2014 at 4:29

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

1 Comment

user3577397 Over a year ago

Just tried that. Now nothing calculates. I can't figure out what's wrong. I'll edit my post above, is it the script that's causing this error?

Louis Michael · Accepted Answer · 2014-10-06 04:33:06Z

0

change the case of your id

var watermelon = document.getElementById("watermelon").value;

var pineapple = document.getElementById("pineapple").value;

answered Oct 6, 2014 at 4:33

Louis Michael

3981 silver badge12 bronze badges

Comments

pcharb · Accepted Answer · 2014-10-06 04:34:37Z

0

I think that this is because getDocumentById is Key sensitive. You have wrote your Id like this : pineapple and watermelon and you check for them with a capital letter like this : Pineapple and Watermelon.

answered Oct 6, 2014 at 4:34

pcharb

1843 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript - I created a form with multiple values, but only one is calculating?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related