0

I can't seem to add my values from my function.

I keep greating NaN.

Here is the html code:

<!DOCTYPE html>
<!-- grocery.html
     A document for computeCost.js
     -->
<html lang = "en">
  <head> 
    <title>grocery.html</title>
    <meta charset = "utf-8" />
    <style type = "text/css">

      #column { display:inline; margin-bottom: 20px; margin-right: 20px; }  
      label,input {display: block; margin-bottom: 20px; margin-right: 20px;} 
      label { float: left; text-align: right;}
      input { margin-left:150px;}


      #items label{ margin-bottom: 20px; margin-right: 20px;} 
      #theCost{margin-bottom: 20px; margin-right: 20px; }
      #done { margin-bottom: 20px; margin-right: 20px;} 
      #done input {display:inline; margin-left: 140px;}  

      #item, #quantity {  margin-left: 40px;}   
     </style>

<!-- Script s -->
    <script type = "text/javascript"  src = "computeCost.js" >
    </script>

  </head>

      <body>
        <h2>Grocery List</h2>
            <form>

                <div id = "column">

                    <label id="item">Item</label>
                    <label id= "quantity">Quantity</label>

                </div>

                <div id= "items">
                    <label>Apple(59 cents each) </label>
                    <input type="text" name="apples" id="appleTotal" />
                    <label>Orange(49 cents each) </label> 
                    <input type="text" name="oranges" id="orangeTotal" />

                    <label>Banana(39 cents each) </label> 
                    <input type="text" name="bananas" id="bananaTotal" />
                </div>



                <div id = "done">

                    <!-- The submit and reset buttons -->
                        <input type = "button"  value = "Submit" onClick ="ComputeCost()"/> 
                        <input type = "reset"  value = "Clear" />

                </div>

                <div id = "taxes">

                    <label>Total before tax </label> 
                    <input type="text" name="beforeTax" id="beforeTaxTotal" onfocus = "this.blur()"/>

                    <label>Tax(7.25%) </label> 
                    <input type="text" name="taxes" id="TaxTotal" disabled ="disabled" />
                </div>

                <div id = "theCost">
                    <!-- Button for precomputation of the total cost -->
                    <label >Total after tax</label>
                    <input type ="text" size = "5" id = "totalCost" onfocus = "this.blur()" />
                </div>



            </form>
      </body>
</html>

Here is the JavaScript Code:
Is not perfect because I been testing things to see if they work but so far is not working

function ComputeCost(){

    var apples = document.getElementById("appleTotal");

    alert(apples.value*.59);

    var oranges = document.getElementById("orangeTotal").value;
    var bananas = document.getElementById("bananaTotal").value;

    appleTotal = parseFloat((apples.value * .59));
    alert(appleTotal);
    orangeTotal = parseFloat((oranges.value * .49));
    bananaTotal = parseFloat((bananas.value * .39));


    var total2 = parseFloat((apples.value * .59)) + parseFloat((oranges.value * .49)) + parseFloat((bananas.value * .39));

    var total = (appleTotal) + (orangeTotal) + (bananaTotal);
    alert(total2);

    alert("The total is " +total);

    var totalBeforeTax;
    totalBeforeTax = Number((apples.value*.59) + (oranges.value * .49) + (bananas.value * .39));



    document.getElementById("beforeTaxTotal").value = (apples.value*.59) + (oranges.value * .49) + (bananas.value * .39);
    document.getElementById("TaxTotal").value = 
    tax = totalCost * .0725;

    document.getElementById("totalCost").value = 
    totalCost = totalCost + tax;

    }
2
Contributors
1
Reply
14
Views
3 Years
Discussion Span
Last Post by AndrisP
0

You read value from form input in to the JavaScript lines 7 and 8 and after you try read value from value in to the lines 12 and 13

Edited by AndrisP

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.