Devloping my calculator - JavaScript

**CAT2008** · 01-23-2008, 09:16 AM

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

 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>");
 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;
}
}

</script>
</body>

</html>

Grateful for any help!!!!!! Sorry for the length of this post!!

**JMRKER** · 01-23-2008, 09:15 PM

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>

**CAT2008** · 01-24-2008, 05:36 AM

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.

Enter the length of your object: (blank box for answer)

Enter the width of your object: (blank box for answer)

Enter the height of your object: (blank box for answer)

These dimensions are in : inches (radio button)
cm's (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>
<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 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)) {
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>

**JMRKER** · 01-24-2008, 07:52 AM

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?

**CAT2008** · 01-24-2008, 08:48 AM

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>
<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:&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>

**JMRKER** · 01-24-2008, 01:58 PM

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'
This is NOT very helpful.

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.

**CAT2008** · 01-25-2008, 04:08 AM

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.

**JMRKER** · 01-25-2008, 09:19 AM

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>



...