Onclick事件无效。有人可以告诉我如何正确调试吗？

Question

我收到此错误：未捕获的ReferenceError：未定义toFahrenheit 在HTMLInputElement.onclick
我正在寻找原因，但更重要的是，在尝试修复代码时我应该采取什么样的流程？ 最后，使用连接到函数的DOM在HTML的末尾应该有文本。

// 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> 

Answer 1

嗯，首先，你错过了两个数学线上的右括号：

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

你也有一个拼写错误的两行开头：

document.getElementById("result").innerHTMl = ...

因为JavaScript区分大小写，应该是：

document.getElementById("result").innerHTML = ...

仅这些就足以导致代码停止工作，如果您在打开浏览器的开发人员工具的情况下运行代码（在任何现代浏览器中按F12键）并点击{{1}，您就会收到这些问题的警报。 }} 标签。这是报告大多数JavaScript错误的地方。它甚至会显示错误所在的行号，如果您点击该链接，它将直接指向它：

继续，如果您不打算收集表单元素值并将它们提交到任何地方，则不应使用Console元素。

接下来，不要使用内联HTML事件属性，例如form，原因有很多，您可以阅读 here 。使用 modern standards 在JavaScript中完成所有事件绑定。

此外，这里不需要两个单独的功能，因为它们都做同样的事情。如果每个按钮存储了它要转换为的单元，那么该单元可以传递给单个函数，该函数将使用它来确定要进行的正确数学运算。我们可以使用HTML data-* 属性，然后使用 .dataset 属性在JavaScript中获取该值。

最后，请记住“HTML”中的“T”代表“文本”。从HTML元素获取的所有数据始终是JavaScript的字符串。如果你想用它做数学，你需要将它转换为数字。这可以通过多种方式完成，但预先挂起onclick运算符的字符串就可以完成。

+

// 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;
}

Answer 2

尝试以下使用浏览器控制台来调试JavaScript

＆＃13;

＆＃13;

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 ";
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;