# Thread: Devloping my calculator - JavaScript

1. Registered User
Join Date
Jan 2008
Posts
4

## Devloping my calculator - JavaScript

Hi,

I was wondering if anyone could help me. Some time ago I put together a calculator with alot of assistance. The calculator worked out whether, from the dimensions entered for length, width and height, whether an item would fit into a fixed size box. The caluclator also let the person select as to whether their dimensions were in cm or inches by ticking a radio button.

I also managed to make the boxes change colour from red (if the measurement entered was to large) and green (if the measurement was okay).

I will copy the script below.

I would like to add to this calculator so that there is a choice of two buttons / two formulas. The first one is detailed above, once the person has enetered their dimensions and ticked the appropriate radio button for either cm/inches they click on a button saying 'will it fit?' and a text statement is returned saying yes it will or no it won't for example.

I would like to add a button next to this 'will it fit button?', the new button will work out how many boxes are required to hold all the items.

Okay, I have worked out the formula for this new button. The person enters the Length, width and height (and so uses the previous dimensions which will have already been entered), they select either cm or inches alike before however when they hit the new button the formula behind it should be:- the total volume, i.e. L x W x H divided by 2.47cu.ft or 0.07cu.m

The return statement would then say something like the approximate number of boxes required are XX boxes.

Part of the current formula I have is this:-
Code:
```<form name = "myform">
<p>Enter the length of your object: - <input type = "text" name = "lgth" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>Enter the width of your object:&nbsp  - <input type = "text" name = "width" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>Enter the height of your object: - <input type = "text" name = "height" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>These dimensions are in:</p>
<p> <input type = "radio" name = "rad1" value = "in" checked = "true"> Inches</p>
<p> <input type = "radio" name = "rad1" value = "cm"> Centimeters</p>
<p> <input type = "button" value = "Calculate - will it fit?" onclick="calculate()" ></p>
<p id="Message" > </p>
<input type="reset" value="Reset" onClick="return Reset();">
</form>

<script type = "text/javascript">

function Reset(){
var responce=confirm('Are you sure you want to clear all your entries? ');
if (responce){
var frm=document.myform
frm.lgth.style.backgroundColor='#FFFFFF';
frm.width.style.backgroundColor='#FFFFFF';
frm.height.style.backgroundColor='#FFFFFF';
document.getElementById('Message').innerHTML='';
}

return responce;
}
function calculate() {
var frm=document.myform
var cf = 1; // conversion factor

cf = 0.3937; // inches in one cm
}
var mess=[];
frm.lgth.style.backgroundColor='#FF0000';
if (frm.lgth.value == 0) {
mess.push("You must enter the length of your object");
}
else if (frm.lgth.value > 58*cf) {
}
else {
frm.lgth.style.backgroundColor='#00FF00';
}
frm.width.style.backgroundColor='#FF0000';
if (frm.width.value == 0) {
mess.push("You must enter the width of your object");
}
else if (frm.width.value > 36*cf) {
}
else {
frm.width.style.backgroundColor='#00FF00';
}

frm.height.style.backgroundColor='#FF0000';
if (frm.height.value == 0) {
mess.push("You must enter the heightof your object");
}
else if (frm.height.value > 31*cf) {
}
else {
frm.height.style.backgroundColor='#00FF00';
}
if (mess.length>0){
document.getElementById('Message').innerHTML=mess.join('<br>');
return false;
}
document.getElementById('Message').innerHTML=("<b>Your obect will fit into the Box (VCB)</b>");
return true;
}

function checkNumeric(which) {
if (/\D/.test(which.value)) {
which.value = which.value.slice(0, -1); // remove invalid character
return false;
}
}

</script>
</body>

</html>```
Grateful for any help!!!!!! Sorry for the length of this post!!
Last edited by Kor; 01-23-2008 at 10:22 AM. Reason: wrap the code [code][/code]

2. ## Try this.

Is this what you are interested in doing?
PHP Code:
``` <html> <head> <title>Size Calculation</title> <script type = "text/javascript"> var _volume = 0; function Reset(){  var responce=confirm('Are you sure you want to clear all your entries? ');  if (responce){   var frm=document.myform   frm.lgth.style.backgroundColor='#FFFFFF';   frm.width.style.backgroundColor='#FFFFFF';   frm.height.style.backgroundColor='#FFFFFF';   document.getElementById('Message').innerHTML='';   document.getElementById('Volume').innerHTML='';   _volume = 0;  }  return responce; } function calculate() {  var frm=document.myform  var cf = 1; // conversion factor  if (frm.rad1[0].checked) { cf = 0.3937; } // inches in one cm     var mess=[];  frm.lgth.style.backgroundColor='#FF0000';  if (frm.lgth.value == 0) { mess.push("You must enter the length of your object"); }  else if (frm.lgth.value > 58*cf) { mess.push("Your item is too long"); }        else { frm.lgth.style.backgroundColor='#00FF00'; }          frm.width.style.backgroundColor='#FF0000';  if (frm.width.value == 0) { mess.push("You must enter the width of your object"); }  else if (frm.width.value > 36*cf) { mess.push("Your item is too wide"); }       else { frm.width.style.backgroundColor='#00FF00'; }  frm.height.style.backgroundColor='#FF0000';  if (frm.height.value == 0) { mess.push("You must enter the heightof your object"); }  else if (frm.height.value > 31*cf) { mess.push("Your item is too high"); }       else { frm.height.style.backgroundColor='#00FF00'; }  if (mess.length>0) {   document.getElementById('Message').innerHTML=mess.join('<br>');   return false;  }  document.getElementById('Message').innerHTML=("<b>Your obect will fit into the Box (VCB)</b>");  _volume = frm.lgth.value * frm.width.value * frm.height.value;  return true; } function checkNumeric(which) {   if (/\D/.test(which.value)) {     alert ("Only numbers are valid!");     which.value = which.value.slice(0, -1); // remove invalid character     return false;   } } function Volume() {  var frm=document.myform  var cf = 2.47; // conversion factor in cubic feet  if (frm.rad1[0].checked) { cf = 0.07; } // cubic meters  if (_volume == 0) { alert('Need to calculate first'); return; }  var str = '';   str += '<p>The approximate number of boxes required is/are: ';  str += (_volume/cf).toFixed(2);  document.getElementById('Volume').innerHTML = str; } </script> </head> <body> <form name = "myform"> <p>Enter the length of your object: -   <input type = "text" name = "lgth" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p> <p>Enter the width of your object:&nbsp  -  <input type = "text" name = "width" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p> <p>Enter the height of your object: -  <input type = "text" name = "height" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>   <p>These dimensions are in:</p> <p> <input type = "radio" name = "rad1" value = "in" checked = "true"> Inches</p> <p> <input type = "radio" name = "rad1" value = "cm"> Centimeters</p> <p> <input type = "button" value = "Calculate - will it fit?" onclick="calculate()" ></p> <p id="Message" > </p> <p> <input type = "button" value = "Volume calculation" onClick="Volume()" ><p/> <p id="Volume" > </p> <input type="reset" value="Reset" onClick="return Reset();"> </form> </body> </html>  ```

3. Registered User
Join Date
Jan 2008
Posts
4
Hi,

Many thanks indeed for your help with this it is much appreciated. I am still having a little trouble though. I have enteded the following script (below) and visually it displays the following.

These dimensions are in : inches (radio button)

(Button) = Calculate will it fit
(Button) = Volume calculation

The 'will it fit' button works by returning a statement saying 'your item will fit.....' or your item is too high etc.... however I cannot get the volume one to work. When you click on it it says that you need to calculate first (alert box) even though you have calculated first. It does not seem to display the number of boxes required.

It is probably something really obvious which I am missing through my own fault!

Here is the script I am now using

<html>
<title>Size Calculation</title>
<script type = "text/javascript">
var _volume = 0;

function Reset(){
var responce=confirm('Are you sure you want to clear all your entries? ');
if (responce){
var frm=document.myform
frm.lgth.style.backgroundColor='#FFFFFF';
frm.width.style.backgroundColor='#FFFFFF';
frm.height.style.backgroundColor='#FFFFFF';
document.getElementById('Message').innerHTML='';
document.getElementById('Volume').innerHTML='';
_volume = 0;
}

return responce;
}

function calculate() {
var frm=document.myform
var cf = 1; // conversion factor

if (frm.rad1[0].checked) { cf = 0.3937; } // inches in one cm

var mess=[];
frm.lgth.style.backgroundColor='#FF0000';
if (frm.lgth.value == 0) { mess.push("You must enter the length of your object"); }
else if (frm.lgth.value > 58*cf) { mess.push("Your item is too long"); }
else { frm.lgth.style.backgroundColor='#00FF00'; }

frm.width.style.backgroundColor='#FF0000';
if (frm.width.value == 0) { mess.push("You must enter the width of your object"); }
else if (frm.width.value > 36*cf) { mess.push("Your item is too wide"); }
else { frm.width.style.backgroundColor='#00FF00'; }

frm.height.style.backgroundColor='#FF0000';
if (frm.height.value == 0) { mess.push("You must enter the height of your object"); }
else if (frm.height.value > 31*cf) { mess.push("Your item is too high"); }
else { frm.height.style.backgroundColor='#00FF00'; }
if (mess.length>0) {
document.getElementById('Message').innerHTML=mess.join('<br>');
return false;
}
document.getElementById('Message').innerHTML=("<b>Your obect will fit into the Box</b>");
_volume = frm.lgth.value * frm.width.value * frm.height.value;
return true;
}

function checkNumeric(which) {
if (/D/.test(which.value)) {
which.value = which.value.slice(0, -1); // remove invalid character
return false;
}
}

function Volume() {
var frm=document.myform
var cf = 2.47; // conversion factor in cubic feet
if (frm.rad1[0].checked) { cf = 0.07; } // cubic meters
if (_volume == 0) { alert('Need to calculate first'); return; }
var str = '';
str += '<p>The approximate number of boxes required is/are: ';
str += (_volume/cf).toFixed(2);
document.getElementById('Volume').innerHTML = str;
}

</script>
<body>
<form name = "myform">
<p>Enter the length of your object: -
<input type = "text" name = "lgth" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>Enter the width of your object:&nbsp -
<input type = "text" name = "width" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>Enter the height of your object: -
<input type = "text" name = "height" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>

<p>These dimensions are in:</p>
<p> <input type = "radio" name = "rad1" value = "in" checked = "true"> Inches</p>
<p> <input type = "radio" name = "rad1" value = "cm"> Centimeters</p>
<p> <input type = "button" value = "Calculate - will it fit?" onclick="calculate()" ></p>
<p id="Message" > </p>

<p> <input type = "button" value = "Volume calculation" onClick="Volume()" ><p/>
<p id="Volume" > </p>

<input type="reset" value="Reset" onClick="return Reset();">
</form>
</body>
</html>

4. ## Questions.

A couple of questions:

1. What errors are you getting? Are you getting any output for any buttons you press with valid input?
2. What has changed between your post #3 and mine at post #2? I'm failing to spot any differences.
(Note: You can put your script between [ php ] and [ / php ] tags (without the spaces) to highlight the changes better)
3. What browser are you using?

5. Registered User
Join Date
Jan 2008
Posts
4
Hi,

I have had a look at it again and so now I have the new 'volume button' on the page directly underneath the 'will it fit button'. Above these I have the 3 lines to enter the dimensions. The 'will it fit' button works once again however when I enter values and click on the new 'volume' button it displays the alert 'need to calculate first'. It does not seem to point to the formular nor display the 'how many boxes required' message.

I am not wonderful with JavaScript as you can probably tell and so it is probably something minor I am not seeing.

I am using IE v6.

I have copied below exactly what script I am using.

<html>
<title>Size Calculation</title>
<script type = "text/javascript">
var _volume = 0;

function Reset(){
var responce=confirm('Are you sure you want to clear all your entries? ');
if (responce){
var frm=document.myform
frm.lgth.style.backgroundColor='#FFFFFF';
frm.width.style.backgroundColor='#FFFFFF';
frm.height.style.backgroundColor='#FFFFFF';
document.getElementById('Message').innerHTML='';
document.getElementById('Volume').innerHTML='';
_volume = 0;
}

return responce;
}

function calculate() {
var frm=document.myform
var cf = 1; // conversion factor

if (frm.rad1[0].checked) { cf = 0.3937; } // inches in one cm

var mess=[];
frm.lgth.style.backgroundColor='#FF0000';
if (frm.lgth.value == 0) { mess.push("You must enter the length of your object"); }
else if (frm.lgth.value > 58*cf) { mess.push("Your item is too long"); }
else { frm.lgth.style.backgroundColor='#00FF00'; }

frm.width.style.backgroundColor='#FF0000';
if (frm.width.value == 0) { mess.push("You must enter the width of your object"); }
else if (frm.width.value > 36*cf) { mess.push("Your item is too wide"); }
else { frm.width.style.backgroundColor='#00FF00'; }

frm.height.style.backgroundColor='#FF0000';
if (frm.height.value == 0) { mess.push("You must enter the heightof your object"); }
else if (frm.height.value > 31*cf) { mess.push("Your item is too high"); }
else { frm.height.style.backgroundColor='#00FF00'; }
if (mess.length>0) {
document.getElementById('Message').innerHTML=mess.join('<br>');
return false;
}
document.getElementById('Message').innerHTML=("<b>Your obect will fit into the Box (VCB)</b>");
_volume = frm.lgth.value * frm.width.value * frm.height.value;
return true;
}

function checkNumeric(which) {
if (/D/.test(which.value)) {
which.value = which.value.slice(0, -1); // remove invalid character
return false;
}
}

function Volume() {
var frm=document.myform
var cf = 2.47; // conversion factor in cubic feet
if (frm.rad1[0].checked) { cf = 0.07; } // cubic meters
if (_volume == 0) { alert('Need to calculate first'); return; }
var str = '';
str += '<p>The approximate number of boxes required is/are: ';
str += (_volume/cf).toFixed(2);
document.getElementById('Volume').innerHTML = str;
}

</script>
<body>
<form name = "myform">
<p>Enter the length of your object:&nbsp
<input type = "text" name = "lgth" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>Enter the width of your object:&nbsp
<input type = "text" name = "width" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>
<p>Enter the height of your object:&nbsp
<input type = "text" name = "height" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p>

<p>These dimensions are in:</p>
<p> <input type = "radio" name = "rad1" value = "in" checked = "true"> Inches</p>
<p> <input type = "radio" name = "rad1" value = "cm"> Centimeters</p>
<p> <input type = "button" value = "Calculate - will it fit?" onclick="calculate()" ></p>
<p id="Message" > </p>

<p> <input type = "button" value = "Volume calculation" onClick="Volume()" ><p/>
<p id="Volume" > </p>

<input type="reset" value="Reset" onClick="return Reset();">
</form>
</body>
</html>

6. ## Seems to be IE6 problem only (?)

I'm not sure what the problem is at this time, but it may be related to the IE6.

I get no errors in Safari or FF-7 for the imac.

I have IE7 at home, so I'll look to see if it just IE or only IE6 that is the problem.

With IE6 running 'parallels' on the imac, I get a small yellow box near the bottom of the page that says:
'Error - unspecified runtime error'

If you have access to another browser, try it again. For me, it works just fine in FF and Safari browsers that I have access to at this time.

Rant comment:
IE is just a pain for JS debugging as far as I'm concerned.
It makes you work to hard to find its own browser spcecific errors while the rest of the world has to revolve around IT!. Errors occur that ONLY occur in IE and none others ... geeze louise.

Perhaps some other forum members have a better IE6 debugger than I do.

7. Registered User
Join Date
Jan 2008
Posts
4

## IE problen

Hi,

I have experienced problems with IE6 before. It is so frustrating as I have gone through the script which you suggested and it all seems fine.

The 'will it fit' button work although there is a yellow box in the bottom left corner with the ! indicatining somthing is worng. When I click on the Volume button the yellow box states there is an error on the page.

It is probably something really simple but is obviously not apparent to us....

Grateful if anyone can offer any suggestions!! to the most recent script I have copied into this thread.

8. ## Suggestion

The only suggestion I can make at this time is to change:
PHP Code:
``` ... var mess=[]; frm.lgth.style.backgroundColor='#FF0000'; if (frm.lgth.value == 0) { mess.push("You must enter the length of your object"); } else if (frm.lgth.value > 58*cf) { mess.push("Your item is too long"); } else { frm.lgth.style.backgroundColor='#00FF00'; }  ....  ```
to use all DOM instead of the mixture you initially created. For example:
PHP Code:
``` ... var mess=[]; var obj = document.getElementById('box_length'); obj.style.backgroundColor='#FF0000'; if (obj.value == 0) { mess.push("You must enter the length of your object"); } else if obj.value > 58*cf) { mess.push("Your item is too long"); } else { obj.style.backgroundColor='#00FF00'; }  // ... etc...  ```
But you will need to add 'id=" into the inputs like
PHP Code:
``` <p>Enter the length of your object:&nbsp <input id="box_length" type = "text" name = "lgth" size = "3" maxlength = "3" onKeyUp="checkNumeric(this)"></p> ...  ```
I have no idea if this is part of the problem, just something to try since it works on all except IE6

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
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.16992 seconds
• Memory Usage 3,019KB
• Queries Executed 13 (?)
Template Usage (34):
• (1)bbcode_code
• (4)bbcode_php
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (8)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (8)postbit
• (8)postbit_onlinestatus
• (8)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (70):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete