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

    Question Javascript and Multiple HTML5 Forms Conflict

    I have made this HTML5 file containing some javascript (made from coffeescript) that will convert Kelvin and Celsius temperatures. When I had one form, it worked well. However, now that I have to forms, the second (newest/bottom one) will not work.

    Code:
    <html>
    	<head><title>Temperature Conversions</title></head>
    	<body>
    		<div id="Coffeescript">
    			<script type="text/javascript">
    function k2c() { //Kelvin to Celsius
    	var x;
    	x = document.querySelectorAll('input[name="k2c_input"]')[0].value - 273.15;
    	alert(x.toFixed(2));
    }
    
    function c2k() { //Celsius to Kelvin
    	var x;
    	x = document.querySelectorAll('input[name="c2k_input"]')[0].value + 273.15;
    	alert(x.toFixed(2));
    }
    
    			</script>
    		</div>
    
    <p>Kelvin to Celsius</p>
    <form action="" method="GET">
    	<input type="text" name="k2c_input" value="" placeholder="KELVIN" id="k2c_input">
    	<input type="submit" name="k2c_button" value="Solve" id="k2c_button" onClick="k2c()">
    	<span id="result_k2c"/>
    </form>
    
    <p>Celsius to Kelvin</p>
    <form action="" method="GET">
    	<input type="text" name="c2k_input" value="" placeholder="CELSIUS" id="c2k_input">
    	<input type="submit" name="c2k_button" value="Solve" id="c2k_button" onClick="c2k()">
    	<span id="result_c2k"/>
    </form>
    
    	</body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,909
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You need to convert the input values which are strings into numbers. If you fail to do that the + sign will concatenate two string values, not add. Your first example worked because Javascript identifies the - sign as a minus and makes the conversion automatically. That will not happen with a +.

    Code:
    x = Number (document.querySelectorAll('input[name="c2k_input"]')[0].value) + 273.15;
    There is no point in having two forms.

    But your code is very unwieldy. What is wrong with

    Code:
    x = Number (document.getElementById("c2k_input").value)+ 273.15;
    alerts are regarded as obsolete and should be used only for testing purposes. Use DOM methods to display a message to the user.




    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-25-2013 at 05:44 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Location
    USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Still no success

    I have tried using "document.getElementById", but then I do not get any results.
    How else can I display the results?
    How can I make multiple input boxes work?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,909
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Well, you have made some sort of error. The fault, dear Brutus, lies not in the stars .... Try again to follow the advice I have given you.

    You should convert your submit buttons to simple buttons. A submit button does what it says - it submits a form to a server-side script.

    You have placed your script within a <div> - remove it.

    I am guessing that what you are trying to do is:-


    Code:
    <html>
    <head>
    <title>Temperature Conversions</title>
    </head>
    <body>
    
    <p>Kelvin to Celsius</p>
    <form>
    	<input type="text" name="k2c_input" id="k2c_input" value="" placeholder="KELVIN" >
    	<input type="button" name="k2c_button" value="Solve" id="k2c_button" onclick="k2c()">
    	<span id="result_k2c"/></span>
    
    <p>Celsius to Kelvin</p>
    	<input type="text" name="c2k_input" id="c2k_input" value="" placeholder="CELSIUS" >
    	<input type="button" name="c2k_button" value="Solve" id="c2k_button" onclick="c2k()">
    	<span id="result_c2k"/></span>
    </form>
    		
    <script type="text/javascript">
    function k2c() { //Kelvin to Celsius
    var x = Number(document.getElementById("k2c_input").value) - 273.15;
    document.getElementById("c2k_input").value = x.toFixed(2);  // form fields have values
    document.getElementById("result_c2k").innerHTML = x.toFixed(2);  // other elements use innerHTML
    }
    
    function c2k() { //Celsius to Kelvin
    var x = Number (document.getElementById("c2k_input").value) + 273.15;
    document.getElementById("k2c_input").value = x.toFixed(2);
    document.getElementById("result_k2c").innerHTML = x.toFixed(2);
    }
    </script>
    
    </body>
    </html>
    This feels like homework. Is it? Study the code I have given you and learn from it.
    Last edited by Philip M; 06-25-2013 at 09:03 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Location
    USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question The advice failed

    I tried the given advice without success. I modified the code. The second input now displays results. However, the second form is using the function intended for the first input box.

    Code:
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>Temperature Conversions</title></head>
    	<body>
    		<script type="text/javascript">
    function k2c() { //Kelvin to Celsius
    	var x;
    	x = document.querySelectorAll('input[name="k2c_input"]')[0].value - 273.15;
    	alert(x.toFixed(2));
    }
    
    function c2k() { //Celsius to Kelvin
    	var x;
    	x = document.querySelectorAll('input[name="c2k_input"]')[0].value + 273.15;
    	alert(x.toFixed(2));
    }
    		</script>
    
    <form method="get">
    
    <p>Kelvin to Celsius</p>
    	<input type="text" name="k2c_input" value="" placeholder="KELVIN" id="k2c_input"/>
    	<button name="k2c_button" id="k2c_button" onClick="k2c()">Solve</button>
    
    <p>Celsius to Kelvin</p>
    	<input type="text" name="c2k_input" value="" placeholder="CELSIUS" id="c2k_input"/>
    	<button name="c2k_button" id="c2k_button" onClick="c2k()">Solve</button>
    
    </form>
    	</body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Jun 2013
    Location
    USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Broken Code

    I pasted the code into an HTML file and opened it in Firefox v21. This code places incorrect values in the other input box. This is useless code.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,909
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by DevynCJohnson View Post
    I pasted the code into an HTML file and opened it in Firefox v21. This code places incorrect values in the other input box. This is useless code.
    No. The code works just fine for me. I simply showed you how to place the results a) in a textbox and (b) in a <span>.

    It is obvious that you are too inexperienced to understand what you are doing or use the advice you are given. You appear to have learned nothing at all.

    So sorry, but I am afraid that you are on your own now.
    Last edited by Philip M; 06-25-2013 at 09:25 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Devyn, I honestly have to jump on Philip’s side here. The code he provided works perfectly and returns exact results (if I put ‘0’ in the K to C field it shows -273.15 in the Celsius field) but for some reason you have modified it and it’s broken so don’t blame Philip for it. The error I get in the console says:

    TypeError: 'undefined' is not a function (evaluating 'x.toFixed(2)')
    That’s on line 15.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,909
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by VIPStephan View Post
    Devyn, I honestly have to jump on Philip’s side here. The code he provided works perfectly and returns exact results (if I put ‘0’ in the K to C field it shows -273.15 in the Celsius field) but for some reason you have modified it and it’s broken so don’t blame Philip for it. The error I get in the console says:

    That’s on line 15.
    Thank you kind sir! The reason for the error is that the OP has totally ignored what I said in post #2 concerning

    x = document.querySelectorAll('input[name="c2k_input"]')[0].value + 273.15;

    and the need to convert the input value to a number.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New to the CF scene
    Join Date
    Jun 2013
    Location
    USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb I found my answer


  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Seriously, you are wasting people’s time here by not following directions and then even dare to complain about this forum on another forum (and even lie by saying “no one could figure it out”)? Such behavior really makes me angry!

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,909
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by VIPStephan View Post
    Seriously, you are wasting people’s time here by not following directions and then even dare to complain about this forum on another forum (and even lie by saying “no one could figure it out”)? Such behavior really makes me angry!
    Why not simply ban him so we don't have to hear from him again?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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