SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Store Calculation

    I'm working with a JavaScript file that has three text boxes for an apple, orange, and banana. The prices are .59, .49, and .39 respectively. Based on the quantity a user enters in the form, I need to keep a running total and then multiply this by a sales tax with this being calculated by a button click. Here's what I have so far:

    HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>5.4</title>
    <script type="text/javascript" src="5.4.js"></script>
    </head>
    <body>
    <h3>My Simple Store</h3>
    <form id="myStore" action="" onSubmit="return false;">
    <table width="400" cellspacing="0" cellpadding="4">
    <tr>
    <td>Apples (.59 cents)</td>
    <td><input type="text" id="apple"></td>
    </tr>
    <tr>
    <td>Orange (.49 cents)</td>
    <td><input type="text" id="orange"></td>
    </tr>
    <tr>
    <td>Banana (.39 cents)</td>
    <td><input type="text" id="banana"></td>
    </tr>
    <tr>
    <td><input type="submit" value="submit" onclick="totalCost();">
    <input type="reset" value="reset">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    JS:

    Code:
    //javascript document
    //create function to compute total cost
    function totalCost(){
        //declare variables
        var apple=document.getElementById("apple").value;
        var orange=document.getElementById("orange").value;
        var banana=document.getElementById("banana").value;
        var totalCost=0;
        var salesTax=0.05;
        var sum=0;
        
        if(apple != ""){
            sum=sum + apple;    
        }
        
        if(orange != ""){
            sum=sum + orange;
        }
        
        if(banana != ""){
            sum=sum + banana;
        }
        
        sum=apple + .59 + orange + .49 + banana + .39; 
        var result=parseInt(sum);
        totalCost=salesTax * sum;
        
        if(totalCost==0){
            alert("Your total cost is: " + totalCost.toPrecision(2));
            return false;
        }else{
            alert("Invalid total cost, please make a selection");
        }
    }
    For some reason, here are the problems:

    1). the sum variable it set to zero, and when I start to accumulate the totals that users could enter, the zero stays, with the quantity, such as 022 where the last two are numbers entered for the quantity of fruit.

    2). when I run across the totalCost in firebug, it gets set to NAN, not a number and I can't determine why? Is it because it's a string? I tried parsing it and that didn't make a difference.

    Any feedback would be great.
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rather then trying to explain and fix your code, i've rewritten it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                
                function calculate() {
    
                    var apples = parseInt(document.getElementById('item_apple').value);
                    if(isNaN(apples)) {
                        alert('You must specify a numeric value for Apples');
                        return;
                    }
                    var oranges = parseInt(document.getElementById('item_orange').value);
                    if(isNaN(oranges)) {
                        alert('You must specify a numeric value for Oranges');
                        return;
                    }
                    var bananas = parseInt(document.getElementById('item_banana').value);
                    if(isNaN(bananas)) {
                        alert('You must specify a numeric value for Bananas');
                        return;
                    }
    
                    var total = 0;
                    total += (apples*0.59);
                    total += (oranges*0.49);
                    total += (bananas*0.39);
                    var calculatedTotal = total + (total * 0.05);
                    alert('Sub: ' + total + '\nTotal: ' + calculatedTotal);
                    var subtotal_ = document.getElementById('subtotal');
                        subtotal_.innerHTML = total;
                    var total_ = document.getElementById('total');
                        total_.innerHTML = calculatedTotal;
    
                }
            
            </script>
        </head>
        <body>
            
            <label>Apple (.59 cents): </label><input type="text" id="item_apple" value="0" size="2" /><br />
            <label>Orange (.49 cents): </label><input type="text" id="item_orange" value="0" size="2" /><br />
            <label>Banana (.39 cents): </label><input type="text" id="item_banana" value="0" size="2" />
    
            <br /><br />
    
            Sub-Total: $<span id="subtotal">0</span><br />
            Total: $<span id="total">0</span>
    
            <br /><br />
            <input type="button" onclick="calculate()" value="Calculate" />
    
        </body>
    </html>
    This checks each of the three inputs to see whether you have typed in a numeric value, by using isNaN.

    It then calculates the values by multiplying the amount by the cost, and then adds it to a total. It then finally adds the 5&#37; to the subtotal and alerts the subtotal and total.

    Edit: Forgot to write the values to the document. You need to format the numbers in a way you want them.

    hth


  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something more like this:

    Code JavaScript:
    function totalCost(){
        //declare variables
        var apple = parseInt(document.getElementById("apple").value);
        var orange = parseInt(document.getElementById("orange").value);
        var banana = parseInt(document.getElementById("banana").value);
        var salesTax = 0.05;
        var sum = 0;
     
        if (!isNaN(apple)) {
            sum += (apple * .59);    
        }
     
        if (!isNaN(orange)) {
            sum += (orange * .49);
        }
     
        if (!isNaN(banana)) {
            sum += (banana * .39);
        }
     
        sum += (salesTax * sum);
     
        if (sum != 0) {
            alert("Your total cost is: " + sum.toPrecision(2));
            return false;
        } else {
            alert("Invalid total cost, please make a selection");
        }
    }

  4. #4
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will the sum value be reset each time the submit button is clicked since it's set to zero initially?
    Ryan Butler

    Midwest Web Design

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't have to be. You can move the scope of the total variable to outside the function. This way on page load it will be set to 0 but each time you calculate, it will just add on.


  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rbutler View Post
    Will the sum value be reset each time the submit button is clicked since it's set to zero initially?
    In my example, yes. It starts at zero and then adds whatever fruit purchases are currently input.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •