Well, first thing, you are missing the closing parenthesis on the two math lines:
(document.getElementById("userInput").value * 9 / 5 + 32;
You also have a typo with the two lines that start off with:
document.getElementById("result").innerHTMl = ...
because JavaScript is case-sensitive and it should be:
document.getElementById("result").innerHTML = ...
These alone are enough to cause your code to stop working and you would have been alerted to these issues if you ran your code with your browser's developer tools turned on (press F12 in any modern browser) and click to the Console
tab. This is where most JavaScript errors will be reported. It will even display the line number where the error is and if you click that link, it will take you straight to it:

Moving on, you shouldn't use the form
element if you are not going to gather up the form element values and submit them anywhere.
Next up, don't use inline HTML event attributes, such as onclick
, there are many reasons why and you can read about them here. Do all your event binding in JavaScript using modern standards.
Also, there's no need for two separate functions here since they both do just about the same thing. If each button stored the unit it was meant to convert to, that unit could be passed to a single function that would use it to determine the proper math to do. We can make that happen by using the HTML data-*
attribute and then pick up that value in JavaScript with the .dataset
property.
Lastly, remember that the "T" in "HTML" stands for "text". All data gotten from an HTML element is always a string to JavaScript. If you want to do math with it, you need to convert it to a number. This can be done in many ways, but pre-pending a +
operator to the string will do it.
// Get both buttons into a JavaScript array and loop over them
Array.prototype.slice.call(document.querySelectorAll("input[type='button']")).forEach(function(btn){
// Set up a common event handler for each that gets the "data-unit" HTML attribute value
// and passes it to the function
btn.addEventListener("click", function(){ convert(this.dataset.unit)
});
});
// Get references to the elements you'll need to work with
var input = document.getElementById("userInput");
var output = document.getElementById("result");
// Single click callback function that recieves the unit based on the button clicked
function convert(unit) {
var other = null; // Will hold unit we are converting to
var answer = null; // Will hold answer
// Check the passed in argument value to see which math we need to do
if(unit.toLowerCase() === "celsius"){
other = "Fahrenheit"
answer = (+input.value - 32) * 5 / 9;
} else {
other = "Celsius";
answer = (+input.value * 9 / 5) + 32;
}
answer = Math.round(answer);
// Write out result:
output.textContent = input.value + " degrees " + other + " is: " + answer + " degrees " + unit;
}
<div class="form-group">
<label for="userInput">Enter your number to convert: </label>
<input type="number" id="userInput">
</div>
<div class="form-group">
<input type="button" id="btnC" data-unit="Celsius" value="To Celsius">
<input type="button" id="btnF" data-unit="Fahrenheit" value="To Fahrenheit">
</div>
<p id="result"></p>