Menu
I'm trying to do a Celsius/Fahrenheit conversion calculator, with a button for each conversion and the result being displayed in the appropriate textbox. I must be missing something obvious here... I'm brand new to javascript and am just not getting it. Here's what I have done so far:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>Convert Fahrenheit and Celsius</title>
<script type="text/javascript">
<!--
function convertToC() {
var fTempVal = parseFloat(document.getElementById('fTemp').value);
var cTempVal = (fTempVal - 32) * (5/9);
document.getElementById('cTemp').value = cTempVal;
}
function convertToF() {
var cTempVal = parseFloat(document.getElementById('cTemp').value);
var fTempVal = (cTempVal * (9/5)) + 32;
document.getElementById('fTemp').value = fTempVal;
}
// -->
</script>
</head>
<body>
<form name="conversionForm">
<table border="1">
<tbody>
<tr>
<td>Fahrenheit</td>
<td><input name="fTemp" type="text"/></td>
<td><button onclick="convertToC">Convert to Celsius</button></td>
</tr>
<tr>
<td>Celsius</td>
<td><input name="cTemp" type="text"/></td>
<td><button onclick="convertToF">Convert to Fahrenheit</button></td>
</tr>
</form>
</tbody>
</table>
</body>
</html>
353
You have a few errors. See this corrected jsFiddle example.
document.getElementById
JavaScript
function convertToC() {
var fTempVal = parseFloat(document.getElementById('fTemp').value);
var cTempVal = (fTempVal - 32) * (5 / 9);
document.getElementById('cTemp').value = cTempVal;
return false;
}
function convertToF() {
var cTempVal = parseFloat(document.getElementById('cTemp').value);
var fTempVal = (cTempVal * (9 / 5)) + 32;
console.log(fTempVal);
document.getElementById('fTemp').value = fTempVal;
return false;
}
HTML
<form name="conversionForm">
<table border="1">
<tbody>
<tr>
<td>Fahrenheit</td>
<td>
<input name="fTemp" id="fTemp" type="text" />
</td>
<td>
<button type="button" onclick="convertToC();return false">Convert to Celsius</button>
</td>
</tr>
<tr>
<td>Celsius</td>
<td>
<input name="cTemp" id="cTemp" type="text" />
</td>
<td>
<button type="button" onclick="convertToF();return false">Convert to Fahrenheit</button>
</td>
</tr>
</tbody>
</table>
</form>
You are querying the DOM with the document.getElementById() function, but both input elements don't currently have an id attribute only a name attribute. So in your example, there are no elements that actually match the IDs you're passing to the function.
You should set the id attributes of both elements like so:
<input id="fTemp" name="fTemp" type="text">
<input id="cTemp" name="cTemp" type="text">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
