It's my first time coding with Javascript, and I am not sure how to proceed with fixing this code. I have tried basic stuff like checking variables are named correctly. I am unsure with what steps to take to fix this code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convert Fahrenheit to Centigrade</title>
</head>
<body>
<h1>Convert Fahrenheit to Centigrade</h1>
<p>Enter degrees in Fahrenheit</p>
<input type="number" id="Fahrenheit">
<p>Degrees in Centigrade</p>
<input type="number" id="Centigrade">
<br /><br />
<button onclick="doCalculation()">Calculate Centigrade from Fahrenheit</button>
<p id="displayResult"></p>
<script>
var fahrenheit;
//var centigrade;
var convertedResult;
function calculateTemperature(fahrenheit)
{
var temperature = (fahrenheit - "32") * 5 / 9;
return temperature;
}
function doCalculation(){
fahrenheit = document.getElementById("Fahrenheit").value;
//centigrade = document.getElementById("Centrigrade").value;
convertedResult = calculateTemperature(fahrenheit)
document.getElementById("displayResult").innerHTML+= fahrenheit + "in Centigrade is" + temperature;
}
</script>
</body>
</html>
The variable temperature which you are using within the value which is getting printed is not defined. If you check the browser, console, you will be able to identify that error.
The value of the result is stored in the convertedResult variable. That variable should be used within the value which is getting printed instead of temperature
function doCalculation(){
fahrenheit = document.getElementById("Fahrenheit").value;
//centigrade = document.getElementById("Centrigrade").value;
convertedResult = calculateTemperature(fahrenheit)
document.getElementById("displayResult").innerHTML = fahrenheit + "in Centigrade is" + convertedResult;
}