Dev Shed Forums

**DevynCJohnson**

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>

**web_loone08**

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).

**DevynCJohnson**

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.

Dev Shed Forums

Thread: Javascript and HTML5: Multiple Input-boxes/Forms Conflict

Javascript and HTML5: Multiple Input-boxes/Forms Conflict

Comments on this post

Thank you