-2

I'm getting this error: Uncaught ReferenceError: toFahrenheit is not defined at HTMLInputElement.onclick
I am looking for the reason why, but much more importantly, what is the process I should take when trying to fix the code? In the end there should be text at the end of the HTML using the DOM connected to the functions.

// Each function should correspond with an on-click event 
// but when I press the buttons nothing happens

function toCelsius() {

 var celsius = (document.getElementById("userInput").value - 32) * 5 / 9;
 celsius = Math.round(celsius);
  document.getElementById("result").innerHTMl = userInput.value + " Farenheit is " + celsius + "Celsius";
}

function toFahrenheit() {

 var fahrenheit = (document.getElementById("userInput").value * 9 / 5 + 32;
 fahrenheit = Math.round(fahrenheit);
 document.getElementById("result").innerHTMl = userInput.value + " Celsius is " +
     celsius + "Fahrenheit";
}
<form action="">
  <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" value="To Celsius" onclick="toCelsius();">
   <input type="button" value="To Fahrenheit" onclick="toFahrenheit();">
  </div>
</form>

<p id="result"></p> 
TylerH
  • 20,799
  • 66
  • 75
  • 101

2 Answers2

2

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:

enter image description here

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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

Try following use browser console to debug JavaScript

function toCelsius() {

  var celsius = (document.getElementById("userInput").value - 32) * 5 / 9;

  celsius = Math.round(celsius);



  document.getElementById("result").innerHTML = userInput.value + " Fahrenheit is    " + celsius + " Celsius ";
}

function toFahrenheit() {

  var fahrenheit = (document.getElementById("userInput").value) * (9 / 5) + 32;

  fahrenheit = Math.round(fahrenheit);

  document.getElementById("result").innerHTML = userInput.value + " Celsius is    " + fahrenheit + " Fahrenheit ";
}
<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" value="To Celsius" onclick="toCelsius()">
  <input type="button" value="To Fahrenheit" onclick="toFahrenheit()">

</div>

<p id="result"></p>
Nisal Edu
  • 7,237
  • 4
  • 28
  • 34