www.webdeveloper.com
Results 1 to 6 of 6

Thread: Embarrassingly simple: getting a calculator to include decimals?

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    3

    Thumbs up Embarrassingly simple: getting a calculator to include decimals?

    Hi all, was wondering if I could get a spot of help here. I'm not a JavaScript coder, but I've been tasked with updating the website at my first job and I'm trying to make a good impression. I've been researching, but have run into a wall with something that I'm sure would be considered embarrassingyl simple. If anyone could give me some tips as to what I'm doing wrong, I'd love them forever.

    Basically, I need to add a sort of shopping-cart calculator to the site. There's a list of products, and beside each product, a "Quantity" field. The calculator knows that Product X is $2.70 and Product Y is $4, so when the user hits the 'calculate total' button, it multiplies each product's price by its quantity, adds them all up, and gives a total figure.

    That's it. Simple, right?

    Well, here's what I've done so far. I added comments for each section so it'd be clear what I'm trying (and failing) to do. http://pastebin.com/raw.php?i=Cd60NY8R

    Now, what I've got there actually does work perfectly fine -- except that it doesn't calculate decimals, and that's a problem for me. Some of the prices need to be things like $3.70, and that calculator doesn't understand that.

    My initial idea was to simply list all the prices in cents, and have the Cal function divide by 100 as its last step. But I'm not sure how to actually add that to the code -- nothing I've tried works.

    Could anyone tip me off as to how I might do that? I'd be grateful.

  2. #2
    Join Date
    Jun 2013
    Posts
    3
    I've only just realised that what I pasted here isn't the actual code, but rather the replacement code I tried to use to fix the problem unsuccessfully. I can't believe I didn't check it.

    Here's the actual code that describes the Cal function.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Show all the pertinent code for the calculator function.
    Or provide a link to the site where the problem exists.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    since naming rules of the class attribute are (read here HTML class Attribute):

    • Must begin with a letter A-Z or a-z
    • Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
    • In HTML, all values are case-insensitive


    your 'price spans' class attributes must look like, for example, p10_25 where 'p' means nothing and will be removed later in the function and '_' stands for a dot if the price contains decimals. try this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <!-- Javascript for the calcualtor's Cal function -->
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function Cal(frm){
    document.getElementsByName('total')[0].value='';
    var elems=frm.elements,total=0,dig=/[\d]{1,}/;
    for(var i=0; i<elems.length; i++){
    if(elems[i].type==='text' && dig.test(elems[i].value)){
    var price=new Number(elems[i].parentNode.className.replace(/p/g,'').replace(/_/g,'.')),
    val=new Number(elems[i].value);
    total+=isFinite(price*val)?(price*val):0;
    }
    else{continue;}
    }
    document.getElementsByName('total')[0].value='$'+total;
    }
    /*]]>*/
    </script>
    </head>
    <body>
    <!-- Actual form, where 'class' is the price. Each row has the product name in one table cell, and then the quantity input in the next cell. -->
    <form>
    <table align="center" width="50%">
    <tbody>
    <tr><td>Product One</td><td style="text-align:right;"><span class="p10">Qty: <input type="text" name="one" size="5" value="" /></span></td></tr>
    <tr><td>Product Two</td><td style="text-align:right;"><span class="p20">Qty: <input type="text" name="two" size="5" value="" /></span></td></tr>
    <tr><td>Product Three</td><td style="text-align:right;"><span class="p10_25">Qty: <input type="text" name="three" size="5" value="" /></span></td></tr>
    <tr><td>Product Four</td><td style="text-align:right;"><span class="p_25">Qty: <input type="text" name="four" size="5" value="" /></span></td></tr>
    
    <!-- Calculate button -->
    	
    <tr>
    <td></td>
    <!--td style="text-align:right;"><input type="button" name="" value="Calculate Total" onmouseup="Cal(this,'two','three','total');" /><input name="total" /-->
    <td style="text-align:right;"><input type="button" name="" value="Calculate Total" onmouseup="Cal(this.form);" /><input name="total" />
    </td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Sep 2007
    Posts
    317
    Code:
      
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /*
    http://www.w3schools.com/css/tryit.asp?filename=trycss_table_color
    */
    table, td, th
    {
    border:1px solid green;
    }
    th
    {
    background-color:green;
    color:white;
    }
    </style>
    <script type="text/javascript">
    // http://www.w3schools.com/css/css_table.asp
    // http://www.webdeveloper.com/forum/showthread.php?278957-Embarrassingly-simple-getting-a-calculator-to-include-decimals
    // http://www.w3schools.com/html/html_tables.asp
    // http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2
    // http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody
    // http://www.w3schools.com/tags/tag_thead.asp
    // http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_colgroup_test
    // http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements
    // http://www.w3schools.com/jsref/prop_html_classname.asp
    // http://www.w3schools.com/jsref/prop_text_defaultvalue.asp
    // http://www.w3schools.com/tags/att_input_readonly.asp
    
    var prd = ['x','y'];
    var prc = ['xPrice','yPrice'];
    var q = [2.70, 4 ];
    
    function calc() {
    var total = document.getElementById('total');
    var sum = 0;
    var i, el, inp;
     for(i=0; i< prd.length; i++) {
     el  = document.getElementById(prd[i]);
     inp = document.getElementById(prc[i]);
     inp.value= Number( el.value) * q[i]; 
     sum +=    Number( inp.value );  
     }
    total.value=sum;
    }
    
    </script>
    </head>
    <body>
    
    <center>
    <table border="1">
      <caption><h1>shopping-cart calculator</h1></caption>
    <colgroup>
        <col span="1" style="background-color:#ada;">
    
        <col style="background-color:gold">
        <col span="1" style="background-color:#ece;">
        <col span="1" style="background-color:#afa;">
      </colgroup>
    <thead>
    <tr>
    <th>product</th>
    <th>price</th>
    <th>quantity</th>
    <th>Kasa</th>
    
    </tr>
    </thead>
      <tfoot style="font-weight:bold; color:red; background-color:#aba;">
        <tr>
          <td>Sum</td>
          <td></td>
          <td></td>
          <td style="text-align: right;"><input type="button" value="calculate" onclick="calc()"><br><input type="text" id="total" name="total" size="5" readonly></td>
        </tr>
    
      </tfoot>
    <tbody>
    <tr>
    <td> x </td>
    <td>$2.70</td>
    <td><input type="text" id="x" name="x" size="5" ></td>
    <td style="text-align: right;"><input type="text" id="xPrice" value="" name="xMultiple" size="5" readonly></td>
    </tr>
    <tr>
    <td>y</td>
    <td>$4</td>
    
    <td><input type="text" id="y" name="y" size="5" ></td>
    <td style="text-align: right;"><input type="text" id="yPrice" value="" name="yMultiple" size="5" readonly></td>
    </tr>
    </tbody>
    </table> 
    </center>
    </body>
    </html>
    Last edited by Ayşe; 06-03-2013 at 03:09 PM.

  6. #6
    Join Date
    Jun 2013
    Posts
    3
    That works perfectly! Thanks, Padonak and Ayse, I really really appreciate the help.

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