www.webdeveloper.com
Results 1 to 8 of 8

Thread: Devloping my calculator - JavaScript

  1. #1
    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
    
     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!!
    Last edited by Kor; 01-23-2008 at 10:22 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Arrow 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. #3
    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.

    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>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Question 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. #5
    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>
    <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>

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Question 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'
    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.

  7. #7
    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. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Exclamation 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

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