为何这段温度转换JS代码结果异常？修改输入框值仍输出32

你的代码存在几个关键问题，导致转换结果始终为32：

1. 输入值获取方式错误 #

<input> 元素的用户输入/初始值存在 value 属性中，而非 innerHTML。innerHTML 用于读取元素内部的HTML内容，你用它获取输入框内容得到的是空字符串，空字符串隐式转为数字是0，代入公式后自然得到 0*1.8+32=32。

2. 未绑定按钮点击事件 #

你的代码在页面加载完成后立刻执行计算，但完全没有处理按钮的点击逻辑——用户修改输入框内容后点击按钮，不会触发重新计算。

3. 未处理字符串转数字的问题 #

输入框获取的 value 是字符串类型，虽然JS会做隐式转换，但显式转为数字能避免意外的类型错误。

修改后的完整代码 #

HTML部分（修正结构规范，将内容移至body）

<!DOCTYPE html>
<html>
<head>
    <title>温度转换</title>
</head>
<body>
    <section id="calcBody"> 
        <span id="infomsg">Please enter current temperature :</span>
        <p>
            <input type="text" id="weathMeas" name="weather" value="58">
        </p>
        <input type="button" id="result" value="result!" onclick="calc()">
        <p id="demo"></p>
    </section>
</body>
</html>

JavaScript部分

function calc() {
    // 获取输入值并转为数字
    let y = Number(document.getElementById("weathMeas").value);
    // 处理非数字输入的情况
    if (isNaN(y)) {
        document.getElementById("demo").innerHTML = "请输入有效的数字";
        return;
    }
    let z = y * 1.8 + 32;
    document.getElementById("demo").innerHTML = z;
}

// 页面加载时自动计算初始值
window.onload = calc;

关键修改说明 #

• 改用 value 属性获取输入框内容
• 给按钮添加 onclick 事件绑定，点击时触发计算
• 用 Number() 显式转换输入值为数字，增加 isNaN() 判断处理无效输入
• 修正HTML结构，将内容区块移至 <body> 标签内（符合HTML规范）
• 添加页面加载回调，自动计算初始输入值的转换结果

内容的提问来源于stack exchange，提问作者Mahmoud Farid