June 25th, 2013, 03:38 PM
-
Javascript and HTML5: Multiple Input-boxes/Forms Conflict
I made an HTML5 file that contains javascript (generated by coffeescript). The HTML5 should allow users to type the temperature in one of two boxes. The first (top) input box converts Kelvin to Celsius and the second (bottom) does the reverse. The first input box works well. However, the second input box is using the JS-function that is intended for the first box. So, the alert box displays an incorrect value.
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>
June 25th, 2013, 07:07 PM
-
Try this:
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 = parseInt(document.querySelectorAll('input[name="k2c_input"]')[0].value) - 273.15;
alert(Math.round(x.toFixed(2)));
}
function c2k() { //Celsius to Kelvin
var x;
x = parseInt(document.querySelectorAll('input[name="c2k_input"]')[0].value) + 273.15;
alert(Math.round(x.toFixed(2)));
}
</script>
<form method="get" onsubmit="return false">
<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>
I added in parseInt() and Math.round(); to give a more unilaterally accurate numeric representation of each temperatures format. And... I added in "return false" to your form's onSubmit event, because; in certain browsers, a button element or a input element (that has a "button" type) can submit a form (when it's onClick event occurs).
Comments on this post
June 26th, 2013, 05:29 AM
-
Thank you
Your code works. Thank you.
I have tried CodingForums (with the thread title "Javascript and Multiple HTML5 Forms Conflict"), but no one could figure it out. Devshed Forums are great.