如何修复无法正常显示计算结果的JavaScript摄氏度转换器？

你的代码存在以下几处核心问题导致无法正常输出结果：

• 变量作用域错误：inputNumber是getInputValue函数内的局部变量，convertTemp函数无法访问；且你只获取了输入框DOM元素，没有读取输入的数值，也没有转换为数字类型
• 转换公式错误：华氏度转摄氏度的正确公式是 (华氏温度 - 32) * 5 / 9，你写的运算顺序完全错误
• 触发逻辑错误：页面加载时就执行了结果赋值的代码，此时用户还没有输入数值；点击按钮的逻辑只调用了getInputValue，没有触发结果更新的操作
• 冗余代码：convertTemp函数里无意义读取了一次result元素，没有实际作用

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type="text" placeholder="What is the temperature..." id="numberEnter">
  <button type="button" onclick="updateResult()">Click to get temperature!</button>
  <p id="result"></p>
</body>
</html>

JS代码 #

// 读取输入的温度值并转为数字
function getInputValue() {
  const inputEle = document.getElementById("numberEnter")
  return Number(inputEle.value) || 0
}

// 执行温度转换，保留2位小数优化显示
function convertTemp(fahrenheit) {
  return ((fahrenheit - 32) * 5 / 9).toFixed(2)
}

// 点击按钮后更新页面结果
function updateResult() {
  const inputTemp = getInputValue()
  const celsius = convertTemp(inputTemp)
  document.getElementById("result").innerHTML = "The temperature in Celcius is " + celsius + "!"
}

内容的提问来源于stack exchange，提问作者WILLIAM SAULT