# Thread: Pounds & Ounces Calculator

1. ## 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 = &#190;

Drop-Down Box 4 = 3
Drop-Down Box 5 = 2
Drop-Down Box 6 = &#188;

Answer = 2.1&#189; have been lost. (To be displayed in a text box)

Many Thanks,

TicTac

2. 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">
<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>
<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. ## Pounds & Ounces Calculator

Can the output be displayed in a text box?

4. 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. ## Pounds & Ounces Calculator

That's fine.

If possible, yes please!

How do I put the JavaScript in an external file?

6. 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">
<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>
<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. 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. there is but theres no learning involved if I do everything for you

9. ## 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. 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">
<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>
<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. Can anyone list any other possible ways this could be achieved?

12. Originally Posted by TicTac
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.

13. Originally Posted by TicTac
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.

14. ## 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 ¾

4 3 ½

Code:

Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title></title>

<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. 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. 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 probablyecho \$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.

17. ## 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 ¾

4 3 ½

Code:

Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title></title>

<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. Haven't you already asked this question before? If not, then you certainly didn't search as I replied to it lol.

19. I have, though is there a simple way to subtract 3 dropdown box values from the other?

20. Logic Ali provided a response and you never replied.

please do not keep starting new threads on the same topic

#### Posting Permissions

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