#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Unhappy How can I create a function that calculate total price of products.


    Hi there.

    I wanted to know how to create a function that can keep adding all the sent parameters(numbers) by user clicks.

    I'm having hard time figuring out how to create loops before writing actual calculation.

    Actually, do I even have to write any kind of loops?

    I want a page where users can see the list of products with each price on the sides, and users can click "add" button of multiple number of products, and number increases on the box called "Total Price" according to user clicks.

    Can anyone please help me??
    I'm new to JS..
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Easiest way, would be something like this:

    Code:
    <script>
    function total(amount)
    {
    var total = document.getElementById("total_storage").value;
    total = parseInt(total) + parseInt(amount);
    document.getElementById("total_storage").value="";
    document.getElementById("total_storage").value = total;
    document.getElementById("total_display").innerHTML = total;
    }
    function resetAll()
    {
    document.getElementById("total_storage").value = "0";
    document.getElementById("total_display").innerHTML="0";
    }
    </script>
    
    Total Price: $ <span id="total_display">0</span> || <a href="#" onclick="resetAll();return false">Clear Cart</a>
    
    <br/>
    <br/>
    
    <input type="button" value="Add $10" onclick="total('10')"/>
    
    <input type="button" value="Add $25" onclick="total('25')"/>
    
    <input type="button" value="Add $100" onclick="total('100')"/>
    
    <input id="total_storage" type="hidden" value="0"/>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Thank you very much!


    Thanks web_loone08.

    Yeah this makes sense after staring at the code for 20 minutes.

    Now I have a stupid question.

    Do you always have to clear the value of said id before storing new information into the value?
    Can you not directly store total amount into the value that has been assigned to number "0" at the begging?

    Thanks
    Last edited by Kravvitz; November 11th, 2012 at 08:04 PM. Reason: must we quote the whole post? :p
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    You don't have to clear the value of the hidden input field each time, but you do need to reset it to "0"; when completely clearing out the "Total Price". Because if you don't; you are going to get a "NaN" or "Not a Number" error, with the code I have provided you.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Sorry for the late reply


    Yeah that makes sense. Thank you very much




    QUOTE=web_loone08]You don't have to clear the value of the hidden input field each time, but you do need to reset it to "0"; when completely clearing out the "Total Price". Because if you don't; you are going to get a "NaN" or "Not a Number" error, with the code I have provided you.[/QUOTE]

IMN logo majestic logo threadwatch logo seochat tools logo