Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unit conversion case switch problem

    I'm currently attempting to make a unit conversion tool. I'd like for the user to select which unit to start and which unit to convert too. EX: 1 foot comes out to 12 inches. So far it's not going well.

    I have two list boxes, named "firstmeasure" and "secondmeasure". For the purpose of this post we will use only 3 different unit in the list boxes, centimeters, feet, and inches. I also have two text boxes used to show the output and for the user to put in a number to convert. And of course, a button that calls the function (I'd prefer it to do the function automatically, but I'll get to that later).

    I'm trying to use variable arrays and using the value of the list box options to define which value the array will use. Then in the function I'm trying to use a switch/case statement to allow it to figure out which numbers to plug into an equation.

    My problem is that it seems to automatically go to the last case option regardless of what the list box is.

    This is the form that in the HTML file:
    Code:
    <form action="" name="lengthform" id="lengthform" >
        <p>
          <label >Select first measurement</label>
          <br/>
          <select id="firstmeasure" name="firstmeasure" >
            <option value="1">Centimeter</option>
            <option value="2">Feet</option>
            <option value="3">Inch</option>
          </select>
          <input type="text" id="input" name="input" value="1" />
          <br/>
          <br/>
          <label >Select Second measurement</label>
          <br/>
          <select id="secondmeasure" name="secondmeasure" >
            <option value="1">Centimeter</option>
            <option value="2">Feet</option>
            <option value="3">Inch</option>
          </select>
          <input type="text" id="output" name="output" />
        </p>      
        <input type="button" onclick="calculate()" value="Convert!" />
    </form>
    This is whats in the Java file:
    Code:
     var centimeters1 = new Array() ;
     centimeters1["1"] = "1" ; //centimeters
     centimeters1["2"] = "0.032808399" ; //feet
     centimeters1["3"] = "0.393700787" ; //inches
    
     var feet1 = new Array() ;
     feet1["1"] = "30.48" ; //centimeters
     feet1["2"] = "2" ; //feet
     feet1["3"] = "12" ; //inches
    
     var inches1 = new Array() ;
     inches1["1"] = "2.54" ; //centimeters
     inches1["2"] = "0.0833333333" ; //feet
     inches1["3"] = "3" ; //inches
    
    function calculate() {	
    var measure1 = document.lengthform.elements["firstmeasure"] ;
    var measure2 = document.lengthform.elements["secondmeasure"] ;
    
    var A = document.lengthform.input.value ;
    var B ;
    var C ;
    	switch (measure1.value){	
    		case "1" :
    			B = centimeters1[measure2.value] ;
    			C = A * B
    	    	document.lengthform.output.value = C
    		case "2" :
    			B = feet1[measure2.value] ;
    			C = A * B
    			document.lengthform.output.value = C
    		case "3" :
    			B = inches1[measure2.value] ;
    			C = A * B
    			document.lengthform.output.value = C
    	}//end switch
    }//end function
    So, measure1 reads the value of the first list box, and measure 2 reads the value of the second list box. I tried using a switch case statement instead of writing a ton of if statements. Which I also tried and it gave me the same problem.

    If there is a much better way to do a conversion tool, than I would love to learn how. Any help on fixing this seemingly easy problem would be great.

    Edit: Do I have to use an "int" variable in the switch statement? I'm using Adobe Dreamweaver and it won't allow to me to create a variable using "int", it just gives me a syntax error.
    Last edited by Aboxofdonuts; 05-09-2012 at 09:33 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I'm not sure on the conversions (you may want to check them), but maybe something like this?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var centimeters; 
    var feet; 
    var inches;
    
    function calculate(frm) {	
    x=frm.first.value;
    centimeters = [x*1,x*0.032808399,x*0.393700787]; 
    feet = [x*30.48,x*1,x*12]; 
    inches = [x*2.54,x*0.0833333333,x*1];
    var C = window[frm.firstmeasure.value][frm.secondmeasure.selectedIndex];
    frm.output.value = C;
    }//end function
    
    </script>
    </head>
    
    <body>
    <form action="" name="lengthform" id="lengthform" >
        <p>
          <label >Select first measurement</label>
          <br/>
          <select id="firstmeasure" name="firstmeasure" >
            <option value="centimeters">Centimeter</option>
            <option value="feet">Feet</option>
            <option value="inches">Inch</option>
          </select>
          <input type="text" id="input" name="first" value="1" />
          <br/>
          <br/>
          <label >Select Second measurement</label>
          <br/>
          <select id="secondmeasure" name="secondmeasure" >
            <option value="1">Centimeter</option>
            <option value="2">Feet</option>
            <option value="3">Inch</option>
          </select>
          <input type="text" id="output" name="output" />
        </p>      
        <input type="button" onclick="calculate(this.form)" value="Convert!" />
    </form>
    </body>
    </html>
    Last edited by xelawho; 05-09-2012 at 09:40 PM.

  • Users who have thanked xelawho for this post:

    Aboxofdonuts (05-09-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Cute, Xelawho. But let's try hard to avoid using window[]??

    Code:
    <script type="text/javascript">
    function calculate(frm) 
    {	
        var x=frm.first.value;
        var measures = {
            centimeters : [x*1,x*0.032808399,x*0.393700787],
            feet : [x*30.48,x*1,x*12],
            inches : [x*2.54,x*0.0833333333,x*1]
        };
        frm.output.value = 
            measures[frm.firstmeasure.value][frm.secondmeasure.selectedIndex];
    }
    </script>
    No global variables. No messy window[].
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • The Following 2 Users Say Thank You to Old Pedant For This Useful Post:

    Aboxofdonuts (05-09-2012), xelawho (05-09-2012)

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Okay, so instead of using a bunch of variable arrays, I just create variables named after the measurements, and then put the equation after it?

    Say I wanted to do yards:

    var yards ;

    yards = [x*91.44,x*3,x*36,x*1]


    The code you posted seems to work great, although I'm still trying to figure out just exactly how it does. I see you changed the value in the first listbox from a number, to the name of the measurement. That's how it reads which variable to use right? How does it know which part of variable = [x,x,x,x] to use?

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Aboxofdonuts View Post
    How does it know which part of variable = [x,x,x,x] to use?
    That's from the number in the second select list.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Aboxofdonuts (05-09-2012)

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    That's from the number in the second select list.
    AH, gotcha.

    I coded visual basic and some c++ a few years ago, so jumping straight back into java is kind of hard lol.

    Thanks everybody for the help.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Here's a more flexible version and maybe easier to understand:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function calculate(frm) 
    {	
        var x=frm.first.value;
        var measures = {
            centimeters : {
                centimeters : x*1,
                feet: x*0.032808399,
                inches: x*0.393700787
            },
            feet : {
                centimeters: x*30.48,
                feet: x*1,
                inches: x*12
            },
            inches : {
                centimeters: x*2.54,
                feet: x*0.0833333333,
                inches: x*1
            }
        };
        frm.output.value = 
            measures[frm.firstmeasure.value][frm.secondmeasure.value];
    }
    </script>
    </head>
    <body>
    <form>
        <p>
          <label >Select first measurement</label>
          <br/>
          <select name="firstmeasure" >
            <option value="centimeters">Centimeter</option>
            <option value="feet">Feet</option>
            <option value="inches">Inch</option>
          </select>
          <input type="text" name="first" value="1" />
          <br/>
          <br/>
          <label>Select Second measurement</label>
          <br/>
          <select name="secondmeasure" >
            <option value="inches">Inch</option>
            <option value="centimeters">Centimeter</option>
            <option value="feet">Feet</option>
          </select>
          <input type="text" name="output" readonly="readonly" />
        </p>      
        <input type="button" onclick="calculate(this.form)" value="Convert!" />
    </form>
    </body>
    </html>
    Notice that I purposely put the second <select> out of order, to show that ordering is not important.

    And now you can add as many other measurement types as you want in there, in any order, all by name.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Aboxofdonuts (05-22-2012)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Quote Originally Posted by felgall View Post
    That's from the number in the second select list.
    By "number" here, Felgall means the INDEX. The value= of all the <option>s in that second select list is ignored.

    In the code posted by Xelawho, the second <select> could have been written
    Code:
          <select name="secondmeasure" >
            <option value="718121">Centimeter</option>
            <option value="zambonis rule">Feet</option>
            <option>Inch</option>
          </select>
    and it would have worked exactly the same. The actual values, indeed even the presence of the value, is not used.

    The selectedIndex is simply the zero-based index of which <option> was chosen.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Old Pedant View Post
    No global variables. No messy window[].

    one less brick wall to bump my head up against

  • #10
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    By "number" here, Felgall means the INDEX. The value= of all the <option>s in that second select list is ignored.

    In the code posted by Xelawho, the second <select> could have been written
    and it would have worked exactly the same. The actual values, indeed even the presence of the value, is not used.

    The selectedIndex is simply the zero-based index of which <option> was chosen.
    Yeah the value of in <option> doesn't have to be a number, it could be "asdbajhsdbahjdbsahdjsa" if you wanted it to be haha.
    I feel much better now that my problem is fixed, I think I was just making it too complicated.

    Thanks again for all the help, much appreciated

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Quote Originally Posted by Aboxofdonuts View Post
    I coded visual basic and some c++ a few years ago, so jumping straight back into java is kind of hard
    Well, yeah. Especially if you write JavaSCRIPT code. Pretty much guaranteed that it will blow up completely if you ever tried to compile it via a Java compiler. <grin style="evil" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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