dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: New to JavaScript and coding Im stuck stuck

  1. #1
    Join Date
    Jan 2014
    Posts
    1

    New to JavaScript and coding Im stuck stuck

    hey Im working on a temperature converter done in javascript. the program lets you enter a value then there are 2 buttons one for "f to c" one for "c to f" I cant figure out how to use both buttons and the functions ive created. I can get one to work but not both. here is my code:

    <!doctype html>
    <html>
    <head>
    <style>
    #result { color: red; font-weight: bold; font-size: 16 px; }
    #fahrenheit { color: blue; font-weight: bold; font-size: 16 px; }
    </style>


    <head>
    <body>
    <h1> Temp Converter </h1>
    <form method="post" >

    <!-- create a text input element -->
    <p>Temperature to convert: <input type="text" name="box_temp"
    id="box_temp" value="0" /> </p>

    <p>
    <input type="button" value="C to F" id="ctof" />
    <input type="button" value="F to C" id="ftoc" />
    <input type="reset" value="Clear" /></p>

    </form>
    <p id="farenheit"></p>
    <p id="celcius"></p>
    <p id="result"></p>
    <script>

    //read length and width and calculate area

    document.getElementById("ctof").onclick = function(){
    //read length and report the value
    var this_temp = document.getElementById("box_temp").value;

    //document.getElementById("ftoc").onclick = function(){
    //read length and report the value
    //var this_temp = document.getElementById("box_temp").value;
    //read width and report the value

    // check for valid input values
    if (isNaN(this_temp) || this_temp < 0) {
    //alert("Invalid temp!");
    //use the "result" element to display the error
    document.getElementById("result").innerHTML= "Invalid temp!";
    //clear the value
    document.getElementById("box_temp").value = "";
    //set focus
    //cleat value
    document.getElementById("box_temp").focus();
    } else {




    //calculate area
    var newFahren = (this_temp)* (1.8)+(32);

    //alert("Fahrenheit temp: " + newFahren);
    document.getElementById("farenheit").innerHTML= "The Fahrenheit temp is "+ newFahren;

    document.getElementById("result").innerHTML= "";
    }


    }






    // not sure how to use this function as well


    // document.getElementById("ftoc").onclick = function(){
    //read length and report the value
    // var this_temp = document.getElementById("box_temp").value;
    //read width and report the value

    // check for valid input values
    if (isNaN(this_temp) || this_temp < 0) {
    //alert("Invalid temp!");
    //use the "result" element to display the error
    document.getElementById("result").innerHTML= "Invalid temp!";
    //clear the value
    document.getElementById("box_temp").value = "";
    //set focus
    //cleat value
    document.getElementById("box_temp").focus();
    } else {
    //calculate area
    var newCelcius = ((this_temp)-32)/(1.8);


    document.getElementById("farenheit").innerHTML= "The Celcius temp is "+ newCelcius;

    document.getElementById("result").innerHTML= "";
    };
    </script>
    </body>
    </html>




    any help on how to either join the function or on how to use either button independently

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,511
    This sounds very home worky

    Also when posting, please use forum wrappers to encase any code, makes for easier reading.

    I will have a look and see if I can suggest anything that you need to do.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,511
    If you are only looking for numerical input, I would suggest that you use a RegExp to only allow numbers for a set range. That then allows you to easily test for numerical valuse and if they are in a predetermined range.

    Alternatively you could use the parseInt() function to extract any numerical data from the form field. It wouldn't matter if any text characters are included because they would be ignored.

    Unless theirs any specific need, any scripting should be in the head of the HTML page.

    You have a web form that is set to
    HTML Code:
    <form method="post" >
    , as you are not posting any data to a server or script, the action can be action="javascript:;" which will prevent any post action.

    I also suggest that you add a hidden field and merge the functions in to one general purpose function, the hidden field would contain the conversion path, C2F or F2C and in the function using an if() else if() clause or a switch() statement, select the appropriate process.

    The you update your output so that your result show the answer from the conversion process.

    Whilst I am aware of your short cut, the accepted formula for temperature conversions are:-

    F2C is C = ( (temp - 32 ) / 9 ) * 5;
    C2F is F = ( (temp / 5 ) * 9) + 32;

    I would think that your tutors would want you to show you understand calculation processes within a program.

    So to give you an idea... here is what I would do.

    HTML Code:
    <!doctype html>
    <html>
    <head>
    <style>
    .result { color: red; font-weight: bold; font-size: 16 px; width:300px; height:50px;}
    </style>
    
    <script>
    function convertion(o){
    
    	var output,
    		temp = parseInt( o.box_temp.value );
    
    	switch( o.convertionPath.value ){
    	
    		case "C to F":
    			temperature = ( (temp / 5 ) * 9) + 32;
    			output = "The Fahrenheit temp is " + temperature;
    		break;
    		
    		case "F to C":
    			temperature = ( (temp - 32 ) / 9 ) * 5;
    			output = "The Celcius temp is " + temperature;
    		break;	
    	
    	}
    
    	o.outputResult.value = output;
    }
    
    function setConversion(o){
    	document.forms.convert.convertionPath.value = o.value;
    }
    </script>
    <head>
    <body>
    <h1> Temp Converter </h1>
    <form name="convert" action="javascript:;" onSubmit="convertion(this);" >
    
    <!-- create a text input element -->
    <p>Temperature to convert: <input type="text" name="box_temp"
    id="box_temp" value="0" /> </p>
    
    <p>
    <input type="hidden" value="C to F" name="convertionPath" />
    
    <input type="submit" value="C to F"  onclick="setConversion(this);" />
    <input type="submit" value="F to C"  onclick="setConversion(this);" />
    <input type="reset" value="Clear" /></p>
    
    <input name="outputResult" type="text" value="" class="result"/> 
    
    </form>
    </body>
    </html>
    You will need to note the changes I used, the way I accessed the information in the form and also set it. Much more tidier than document.getElementById which is the most abused method of accessing forms data, you should first understand how to access form data before using the previously mentioned access method.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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