www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Help with functions and "onclick"

Hybrid View

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    resolved [RESOLVED] Help with functions and "onclick"

    Hello, I'm doing an assignment for a web design class. I'm developing some javascript that allows the user to input a temperature in Farenheit and receive a Celsius conversion. Here's what I have so far.

    PHP Code:
    //in HTML document
    <p>Please enter the temperature in Fahrenheit.</p>
    <
    label for="textInput">Temperature: </label>

    <
    input type="text" name="textInput" id="textInput" value="" />

    <
    p><input type="button" value="Convert" onclick="convertTemp("textInput", "textOutput")" /></p>

    <
    label for="textOutput">In Celsius: </label>

    <
    input type="text" name="textOutput" id="textOutput" value="" readOnly=true />

    //in javascript file
    function convertTemp(inputIdoutputId) {

    var 
    input parseInt(document.getElementById(inputId).value);

    document.getElementById(outputId).value = ((input 32) * (9));

                            } 
    I'm having a real hard time grasping how a function receives information and returns it, so how I'm supposed to get the function to output to the "celsius" text box is eluding me. Some help, if you please?

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    After I cleaned up your code, it produced the correct results. The two places I corrected are:

    Code:
    document.getElementById(outputId).value = ((input - 32) * (5 / 9));
    to

    Code:
    document.getElementById(outputId).value = (input - 32) * (5/9);
    and

    Code:
    <p><input type="button" value="Convert" onclick="convertTemp("textInput", "textOutput")" /></p>
    to

    Code:
    <p><input type="button" value="Convert" onclick="convertTemp('textInput', 'textOutput')" /></p>
    You return your Celsius calculation by setting it as the value for the outputId, exactly as how you've done!

    If you want to run it all in 1 file (probably already are doing this or an equivalent):

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type = "text/javascript">
    			function convertTemp(inputId, outputId) {
    				var input = document.getElementById(inputId).value; 
    				if(input == null || input == "") {
    					document.getElementById(outputId).value = "nothing";
    					return;
    				}
    				input = parseInt(input);
    				document.getElementById(outputId).value = ((input - 32) * (5/9)).toFixed(2);
    			}
    		</script>
    	</head>
    	<body>
    		<p>Please enter the temperature in Fahrenheit.</p> 
    		<label for="textInput">Temperature: </label> 
    
    		<input type="text" name="textInput" id="textInput" value="" /> 
    
    		<p><input type="button" value="Convert" onclick="convertTemp('textInput', 'textOutput')" /></p> 
    
    		<label for="textOutput">In Celsius: </label> 
    
    		<input type="text" name="textOutput" id="textOutput" value="" readOnly=true /> 
    	</body>
    </html>
    The extra bit I added in was to prevent the output of NaN if the user just clicks the button without entering anything. The only other thing you could consider adding is to check whether the input contains only numbers.

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    That's awesome man! Thanks for cleaning this up for me. It works well.

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