www.webdeveloper.com
Results 1 to 3 of 3

Thread: How can I create a function that calculate total price of products?

  1. #1
    Join Date
    Nov 2012
    Posts
    2

    Question 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
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Something like this???
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title> Product summation </title>
    </head>
    <body>
    <div id="priceList">
     <li> <input type="checkbox" value="1.00"> Apples ($1.00) </li>
     <li> <input type="checkbox" value="1.50"> Bananas ($1.50) </li>
     <li> <input type="checkbox" value="3.50"> Cherries ($3.50) </li>
     <li> <input type="checkbox" value="2.50"> Oranges ($2.50) </li>
     <li> <input type="checkbox" value="5.00"> Watermelon ($5.00) </li>
     <div id="priceTotal" />
    </div>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?268169-How-can-I-create-a-function-that-calculate-total-price-of-products&daysprune=30
    
    (function() { /* Place BELOW all <li> tags */
      var as = document.getElementById('priceList').getElementsByTagName("li");
      for( var i = 0; as[i]; i++ ) as[i].onclick = f;
      function f() {
        var sum = 0;
        var cb = document.getElementById('priceList').getElementsByTagName('input');
        for( var i=0; cb[i]; i++ ) if (cb[i].checked) { sum += cb[i].value*1; }
        document.getElementById('priceTotal').innerHTML = 'Total: $'+sum.toFixed(2);
      }
    })();
    // Above modified from: http://www.codingforums.com/showthread.php?t=281682
    
    </script>
    </body>
    </html>

  3. #3
    Join Date
    Nov 2012
    Posts
    2

    Sorry for late reply

    Thank you very much for your reply.

    That was amazing.

    And I will use and learn this script so that i can get better understanding of it.

    again, Thank you very much for your work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles