JavaScript华氏度转摄氏度代码点击按钮后不输出结果如何解决

现有代码核心错误 #

• 变量作用域错误：temperature 是 calculateTemperature 函数的内部局部变量，在 doCalculation 函数中无法直接访问，你已经把计算返回值存到了 convertedResult 变量中，输出时直接使用该变量即可。
• 类型处理不规范：从输入框获取的 value 是字符串类型，计算逻辑里的 32 也被写成了字符串格式，虽然JavaScript支持隐式类型转换，但很容易引发异常，建议显式转换为数字类型再计算。
• 文本拼接缺空格：输出的文本前后没有加空格，会出现字符粘连的展示问题。

修复后完整代码 #

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>华氏度转摄氏度</title>
</head>
<body>
    <h1>华氏度转摄氏度</h1>
    <p>输入华氏度数值</p>
    <input type="number" id="Fahrenheit">   
    <p>摄氏度结果</p>
    <input type="number" id="Centigrade">
    <br /><br />
    <button onclick="doCalculation()">将华氏度转换为摄氏度</button>
    <p id="displayResult"></p>
    <script>
        var fahrenheit;
        var convertedResult;
        
        function calculateTemperature(fahrenheit) { 
            // 显式转为数字类型计算，32使用数字格式
            var temperature = (Number(fahrenheit) - 32) * 5 / 9; 
            return temperature;
        }

        function doCalculation(){
            fahrenheit = document.getElementById("Fahrenheit").value;
            convertedResult = calculateTemperature(fahrenheit)
            // 使用convertedResult输出，补充空格、保留2位小数优化展示效果
            document.getElementById("displayResult").innerHTML += `${fahrenheit} 华氏度等于 ${convertedResult.toFixed(2)} 摄氏度<br/>`;
            // 同步将结果填入摄氏度输入框
            document.getElementById("Centigrade").value = convertedResult.toFixed(2);
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Daniel A