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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble with href and java

    So trying to build a simple C to F calculator and running into an issue using the getElementByID and href. I want to enter the value into the field and click the href link to calculate the answer in the other field.

    Any help would be greatly appreciated

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
    
    <script type="text/javascript">
    function convert(degree)
    {
    if (degree=="C")
     {
     F=document.getElementById("c").value * 9 / 5 + 32;
     document.getElementById("f").value=Math.round(F);
     }
    else	
     {
     C=(document.getElementById("f").value -32) * 5 / 9;
     document.getElementById("c").value=Math.round(C);
     }
    }
    </script>
    
    <title> Celcius to Fehenheit Calculator </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
    
    <h2> <center> Celcius to Fehenheit Calculator </center> </h2>
    
    <h3> <center> Please enter a number in a field to find your answer </center></h3>
    <form>
    <table width="100%">
    	        <tr>
    	            <td>
    		            <table align="center" cellpadding="10" cellspacing="3" border="5"
    <tr>
    <td>Celcius: <input type="text" id = "c" name = "c" /></td>
    <td>Ferenheit: <input type = "text" id = "f" name="f" /></td>
    </tr>
    
    <tr>
    <td><p id="c"><a href = "javascript:changetext("c", "f");"> Click Me </a></p> </td>
    
    <td><a href = "javascript:changetext("f", "c");"> Click Me </a> </td>
    
    </tr>
    
    </table>
    </form>
    
    </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    1. There's no Java there at all - just JavaScript (completely different language) attached in the wrong place in the HTML. JavaScript should be attached just before the </body> tag so that the ids the code references have loaded first.

    2. JavaScript also works better with HTML 4 or 5 than it does with the HTML 3.2 you have in your page.

    Also JavaScript rarely works properly when attached to the href attribute (where it breaks the page for anyone with JavaScript turned off. The href should reference where you want the link to go to when JavaScript is off and the JavaScript should be attached to the onclick event handler (or better using a click event listener).
    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.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,077
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Without styling:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Celcius to Fehenheit Calculator </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    
    <body>
    
    <h2>Celcius to Fehenheit Calculator</h2>
    <h3>Please enter a number in a field to find your answer</h3>
    Celcius: <input type="text" id="celcius"/><br />
    Ferenheit: <input type="text" id="fehenheit"/><br />
    <button onclick="convert('c');">Click Me for Fehenheit</button><br />
    <button onclick="convert('f');">Click Me for Celcius</button>
    
    <script type="text/javascript">
    function convert(degree){
    	if (degree == "c"){
    		var F = (document.getElementById("celcius").value * 9 / 5) + 32;
    		document.getElementById("fehenheit").value = Math.round(F);
    	}else{
    		var C=(document.getElementById("fehenheit").value -32) * 5 / 9;
    		document.getElementById("celcius").value = Math.round(C);
    	}
    }
    </script>
    </body>
    </html>
    Some problems with a reset for the text areas and checks on the input, but this is basicly what you want.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank yous so much

    I should of specified JavaScript

    I dont know why i was told the script needs to go in the head of the document.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by fcnchuck View Post
    I dont know why i was told the script needs to go in the head of the document.
    Technically, script elements like the one shown in sunfighter's code should appear within the head element of the document. Why? Because you should define a function before using it. In that code, the convert function is used before it's defined. It's probably a moot point though since the browser will likely have finished loading the entire document before the user gets around to clicking a button resulting in no functional difference in behavior.

    A more correct method would be to define the event listeners after the function exists which can be done by defining them via the addEventListener method instead of via onclick attributes:

    Code:
    <label for="celsius">Celsius</label> <input type="text" id="celsius">
    <label for="fahrenheit">Fahrenheit</label> <input type="text" id="fahrenheit">
    <button id="celsius.to.fahrenheit.button">Click Me for Fahrenheit</button>
    <button id="fahrenheit.to.celsius.button">Click Me for Celsius</button>
    <script>
    	var FahrenheitInput = document.getElementById("fahrenheit");
    	var CelsiusInput = document.getElementById("celsius");
    	function convertCelsiusToFahrenheit() {
    		var CelsiusTemperature = (Number(FahrenheitInput.value) - 32) * (5 / 9);
    		CelsiusInput.value = String(Math.round(CelsiusTemperature));
    	}
    	function convertFahrenheitToCelsius() {
    		var FahrenheitTemperature = Number(CelsiusInput.value) * (9 / 5) + 32;
    		FahrenheitInput.value = String(Math.round(FahrenheitTemperature));
    	}
    	document.getElementById("celsius.to.fahrenheit.button").addEventListener("click", convertCelsiusToFahrenheit);
    	document.getElementById("fahrenheit.to.celsius.button").addEventListener("click", convertFahrenheitToCelsius);
    </script>
    In this case, it's now advantageous to put the script element at the end of the document because, if placed within the head element, a secondary event listener must be defined to delay script execution until the elements you're operating on exist:

    Code:
    <head>
    	<meta charset="utf-8">
    	<title>Demo</title>
    	<script>
    		function initializeConversionCalculator() {
    			var FahrenheitInput = document.getElementById("fahrenheit");
    			var CelsiusInput = document.getElementById("celsius");
    			function convertCelsiusToFahrenheit() {
    				var CelsiusTemperature = (Number(FahrenheitInput.value) - 32) * (5 / 9);
    				CelsiusInput.value = String(Math.round(CelsiusTemperature));
    			}
    			function convertFahrenheitToCelsius() {
    				var FahrenheitTemperature = Number(CelsiusInput.value) * (9 / 5) + 32;
    				FahrenheitInput.value = String(Math.round(FahrenheitTemperature));
    			}
    			document.getElementById("celsius.to.fahrenheit.button").addEventListener("click", convertCelsiusToFahrenheit);
    			document.getElementById("fahrenheit.to.celsius.button").addEventListener("click", convertFahrenheitToCelsius);
    		}
    		document.addEventListener("DOMContentLoaded", initializeConversionCalculator); // Delay script execution.
    	</script>
    </head>
    <body>
    	<!-- […] -->
    	<label for="celsius">Celsius</label> <input type="text" id="celsius">
    	<label for="fahrenheit">Fahrenheit</label> <input type="text" id="fahrenheit">
    	<button id="celsius.to.fahrenheit.button">Click Me for Fahrenheit</button>
    	<button id="fahrenheit.to.celsius.button">Click Me for Celsius</button>
    </body>
    There's nothing wrong with either method. It's a matter of preference really.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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