SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pounds & Ounces Calculator

    Hi,

    Using JavaScript, how do I subtract a weight from a drop-down menu from another drop-down menu, to calculate the amount of weight loss?
    In total there should be 6 drop-down boxes, these are the following:

    1: Pounds (Before), 2. Ounces (Before), 3. Fraction (Before), 4. Pounds (After), 5. Ounces (After), & 6. Fraction (After)

    For example if:

    Drop-Down Box 1 = 5
    Drop-Down Box 2 = 3
    Drop-Down Box 3 = ¾

    Drop-Down Box 4 = 3
    Drop-Down Box 5 = 2
    Drop-Down Box 6 = ¼

    Answer = 2.1½ have been lost. (To be displayed in a text box)

    Many Thanks,

    TicTac

  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)
    Had a play and came up with:

    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 doCalc() {
                    var before = new Array(
                        document.getElementById('before_pounds').options[document.getElementById('before_pounds').selectedIndex].value,
                        document.getElementById('before_ounces').options[document.getElementById('before_ounces').selectedIndex].value,
                        document.getElementById('before_fractions').options[document.getElementById('before_fractions').selectedIndex].value);
                    var after = new Array(
                        document.getElementById('after_pounds').options[document.getElementById('after_pounds').selectedIndex].value,
                        document.getElementById('after_ounces').options[document.getElementById('after_ounces').selectedIndex].value,
                        document.getElementById('after_fractions').options[document.getElementById('after_fractions').selectedIndex].value);
    
                    var pounds = before[0] - after[0];
                    var ounces = before[1] - after[1];
                    var fractions = before[2] - after[2];
                    document.getElementById('result').innerHTML = pounds + '.' + ounces + '&frac' + fraction(fractions) + ';'
                    //alert(pounds + "/" + ounces + "/&frac" + fraction(fractions) + ";");
                }
                function fraction(decimal){
                    if(!decimal){
                    decimal=this;
                    }
                    whole = String(decimal).split('.')[0];
                    decimal = parseFloat("."+String(decimal).split('.')[1]);
                    num = "1";
                    for(z=0; z<String(decimal).length-2; z++){
                    num += "0";
                    }
                    decimal = parseInt(decimal*num);
                    num = parseInt(num);
                    for(z=2; z<decimal+1; z++){
                    if(decimal&#37;z==0 && num%z==0){
                    decimal = decimal/z;
                    num = num/z;
                    z=2;
                    }
                    }
                    return ((whole==0)?"" : whole+" ")+decimal+""+num;
                    }
            </script>
        </head>
        <body>
            
            <label for="before_pounds">Before: </label>
            <label for="before_pounds">Pounds: </label>
            <select id="before_pounds">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="before_ounces">Ounces: </label>
            <select id="before_ounces">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="before_fractions">Fractions: </label>
            <select id="before_fractions">
                <option value=".25"></option>
                <option value=".5"></option>
                <option value=".75"></option>
                <option value="1">1</option>
            </select>
            <br />
            <label for="after_pounds">After: &nbsp;&nbsp; </label>
            <label for="after_pounds">Pounds: </label>
            <select id="after_pounds">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="after_ounces">Ounces: </label>
            <select id="after_ounces">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="after_fractions">Fractions: </label>
            <select id="after_fractions">
                <option value=".25"></option>
                <option value=".5"></option>
                <option value=".75"></option>
                <option value="1">1</option>
            </select>
            <br /><br />
            <input type="button" value="Calculate" onclick="doCalc();" />
            <br /><br />
            <div id="result"></div>
        </body>
    </html>


  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pounds & Ounces Calculator

    Can the output be displayed in a text box?

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could but it wouldn't display the fractions the way you would want to, it would display then like 1/2 instead of


  5. #5
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pounds & Ounces Calculator

    That's fine.

    If possible, yes please!

    How do I put the JavaScript in an external file?

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go:

    As for external js files, is there a reason why? Are you planning on reusing this alot?

    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 doCalc() {
                    var before = new Array(
                        document.getElementById('before_pounds').options[document.getElementById('before_pounds').selectedIndex].value,
                        document.getElementById('before_ounces').options[document.getElementById('before_ounces').selectedIndex].value,
                        document.getElementById('before_fractions').options[document.getElementById('before_fractions').selectedIndex].value);
                    var after = new Array(
                        document.getElementById('after_pounds').options[document.getElementById('after_pounds').selectedIndex].value,
                        document.getElementById('after_ounces').options[document.getElementById('after_ounces').selectedIndex].value,
                        document.getElementById('after_fractions').options[document.getElementById('after_fractions').selectedIndex].value);
    
                    var pounds = before[0] - after[0];
                    var ounces = before[1] - after[1];
                    var fractions = before[2] - after[2];
    
                    document.getElementById('result').value = pounds + '.' + ounces + ' ' +  fraction(fractions) + ' have been lost.';
                    //alert(pounds + "/" + ounces + "/&frac" + fraction(fractions) + ";");
                }
                function fraction(decimal){
                    if(!decimal){
                    decimal=this;
                    }
                    whole = String(decimal).split('.')[0];
                    decimal = parseFloat("."+String(decimal).split('.')[1]);
                    num = "1";
                    for(z=0; z<String(decimal).length-2; z++){
                    num += "0";
                    }
                    decimal = parseInt(decimal*num);
                    num = parseInt(num);
                    for(z=2; z<decimal+1; z++){
                    if(decimal&#37;z==0 && num%z==0){
                    decimal = decimal/z;
                    num = num/z;
                    z=2;
                    }
                    }
                    return ((whole==0)?"" : whole+" ")+decimal+"/"+num;
                    }
            </script>
        </head>
        <body>
            
            <label for="before_pounds">Before: </label>
            <label for="before_pounds">Pounds: </label>
            <select id="before_pounds">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="before_ounces">Ounces: </label>
            <select id="before_ounces">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="before_fractions">Fractions: </label>
            <select id="before_fractions">
                <option value=".25"></option>
                <option value=".5"></option>
                <option value=".75"></option>
                <option value="1">1</option>
            </select>
            <br />
            <label for="after_pounds">After: &nbsp;&nbsp; </label>
            <label for="after_pounds">Pounds: </label>
            <select id="after_pounds">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="after_ounces">Ounces: </label>
            <select id="after_ounces">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            <label for="after_fractions">Fractions: </label>
            <select id="after_fractions">
                <option value=".25">&#188;</option>
                <option value=".5">&#189;</option>
                <option value=".75">&#190;</option>
                <option value="1">1</option>
            </select>
            <br /><br />
            <input type="button" value="Calculate" onclick="doCalc();" />
            <br /><br />
            <input type="text" id="result" />
        </body>
    </html>


  7. #7
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it will be used within two individual forms, to add other data including weights to two individual databases.

    Does the JavaScript need to contain arrays, or is there a simpler way of achieving the same thing.

    Is there anyway of stopping the following displaying, if no fraction is selected?

    1.4&frac[object] NaN10;

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is but theres no learning involved if I do everything for you


  9. #9
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pounds & Ounces Calculator

    There is learning involved,

    I prefer to try to understand how people achieve the code they written, then try to make head or tail of it on a new section of my project.
    I'll leave it up to you, but anyway help greatly appreciated.
    Everybody has there own learning styles, and the above is mine.

    I'm always interested in multiple ways of doing things, that utilize the smallest of codes

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a different solution, using modulo arithmetic. It also allows for different denominators for the fractional part and calculates weight change.

    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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Weights</title>
    	<script type="text/javascript">
    	function toSingle(pounds, ounces, numerator, denominator) {
    		return ((pounds * 16) + ounces) * denominator + numerator;
    	}
    	function toMultiple(single, denominator) {
    		return {
    			"pounds":Math.floor(single / (16 * denominator)),
    			"ounces":Math.floor(single / denominator) &#37; 16,
    			"numerator":single % denominator};
    	}
    	function weightChange(pounds1, ounces1, num1, pounds2, ounces2, num2, den) {
    		var single1 = toSingle(pounds1, ounces1, num1, den);
    		var single2 = toSingle(pounds2, ounces2, num2, den);
    		return toMultiple(Math.max(single1, single2) - Math.min(single1, single2), den);
    	}
    	function doCalc() {
    		var loss = weightChange(
    						parseInt(document.getElementById("before_pounds").value),
    						parseInt(document.getElementById("before_ounces").value),
    						parseInt(document.getElementById("before_frac").value),
    						parseInt(document.getElementById("after_pounds").value),
    						parseInt(document.getElementById("after_ounces").value),
    						parseInt(document.getElementById("after_frac").value),
    						4);
    		document.getElementById("txt").value = loss.pounds + "." + loss.ounces + " " + (loss.numerator ? ["0", "1/4", "1/2", "3/4"][loss.numerator] : "");
    	}
    	</script>
    </head>
    <body>
    <h1>Weight Change Calculator</h1>
    
    <h2>Weight Before:</h2>
    <ul>
    <li>Pounds: 
    <select id="before_pounds">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></li>
    <li>Ounces:
    <select id="before_ounces">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></li>
    <li>Fraction:
    <select id="before_frac">
    <option value="0">0</option>
    <option value="1">1/4</option>
    <option value="2">1/2</option>
    <option value="3">3/4</option>
    </select></li>
    </ul>
    
    <h2>Weight After:</h2>
    <ul>
    <li>Pounds:
    <select id="after_pounds">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></li>
    <li>Ounces:
    <select id="after_ounces">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></li>
    <li>Fraction:
    <select id="after_frac">
    <option value="0">0</option>
    <option value="1">1/4</option>
    <option value="2">1/2</option>
    <option value="3">3/4</option>
    </select></li>
    </ul>
    <input type="button" onclick="doCalc()" value="Calculate" />
    <h2>Weight Change:</h2>
    <input type="text" id="txt" />
    </body>
    </html>

  11. #11
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone list any other possible ways this could be achieved?

  12. #12
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TicTac View Post
    Can anyone list any other possible ways this could be achieved?
    Is that question 1b? There are as many ways of doing it as there are students charged with doing it.
    Tab-indentation is a crime against humanity.

  13. #13
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TicTac View Post
    Yes, it will be used within two individual forms, to add other data including weights to two individual databases.
    Then it looks like you need a solution that supports multiple instances.
    The select boxes should be exactly as shown, and the forms should not contain any other select boxes.
    Tab-indentation is a crime against humanity.

  14. #14
    Non-Member
    Join Date
    Aug 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pounds & Ounces Calculator

    Hiya,

    How do I subtract the first 3 drop-down box option values from the 2nd three drop down box option values

    For example, if the following is selected......

    2 4

    6 7

    Answer:

    4 3


    Code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    
    <body>
    <select name="select">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select2">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select3">
      <option value="0.25">&frac14;</option>
      <option value="0.50">&frac12;</option>
      <option value="0.75">&frac34;</option>
    </select>
    <br>
    <select name="select4">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select4">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select4">
      <option value="0.25">&frac14;</option>
      <option value="0.50">&frac12;</option>
      <option value="0.75">&frac34;</option>
    </select>
    </body>
    </html>

  15. #15
    An average geek earl-grey's Avatar
    Join Date
    Mar 2005
    Location
    Ukraine
    Posts
    1,403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming that you made typos when naming the two last drop boxes:
    PHP Code:
    <?php

    echo ((int) $_POST['select4'] - (int) $_POST['select1']);
    echo 
    ' ';
    echo ((int) 
    $_POST['select5'] - (int) $_POST['select2']);
    echo 
    ' ';
    echo ((int) 
    $_POST['select6'] - (int) $_POST['select3']);

    ?>

  16. #16
    SitePoint Zealot Dachande663's Avatar
    Join Date
    Feb 2005
    Location
    Birmingham, UK
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the pounds select, store the values in ounces, that way you can do a simple calculation to get the difference. Once you've got the difference you can use this script to parse the output.
    PHP Code:
    $diff 67.5// this is the difference in your example
    $decimal_array = array(25=>'',50=>'',75=>'');
    $pounds floor($diff/16);
    $ounces floor($diff $pounds*16);
    $decimal_temp $diff $ounces $pounds*16;
    $decimal $decimal_array[$decimal_temp*100]; // not the most efficient way probably
    echo $pounds .' '$ounces .' '$decimal
    Also, you may want to add zero values to the dropdowns but I'm not sure if you need them dependant upon your situation. As a final point, earl-grey's method would fail if you say did 0.25 - 0.75.
    Web Developer & Geek: hybridlogic.co.uk ~ lukelanchester.com

  17. #17
    Non-Member
    Join Date
    Aug 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pounds & Ounces Calculator

    Hiya,

    How do I subtract the first 3 drop-down box option values from the 2nd three drop down box option values

    For example, if the following is selected......

    2 4
    6 7

    Answer:

    4 3


    Code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    
    <body>
    <select name="select">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select2">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select3">
      <option value="0.25">&frac14;</option>
      <option value="0.50">&frac12;</option>
      <option value="0.75">&frac34;</option>
    </select>
    <br>
    <select name="select4">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select4">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
    </select>
    <select name="select4">
      <option value="0.25">&frac14;</option>
      <option value="0.50">&frac12;</option>
      <option value="0.75">&frac34;</option>
    </select>
    </body>
    </html>

  18. #18
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haven't you already asked this question before? If not, then you certainly didn't search as I replied to it lol.


  19. #19
    Non-Member
    Join Date
    Aug 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have, though is there a simple way to subtract 3 dropdown box values from the other?

  20. #20
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logic Ali provided a response and you never replied.
    Last edited by r937; Aug 29, 2007 at 05:15.


  21. #21
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,262
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    threads merged

    please do not keep starting new threads on the same topic
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"


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
  •