JavaScript获取输入框值相加输出NaN问题求解

你把读取输入框值、解析整数的逻辑写在了word函数外部，这部分代码会在页面加载、JS文件初始化时立刻执行，此时用户还没在输入框填内容，拿到的是空字符串，parseInt('') 直接返回NaN。后续点击按钮触发函数时，计算用的始终是初始化阶段拿到的两个NaN值，相加结果自然是NaN。

• 把读取输入、解析值的逻辑移到word函数内部，保证每次点击按钮时，都能读取到用户当前输入的最新内容
• 增加简单的输入合法性校验，避免用户输入非数字内容时出现异常结果

修复后的完整JS代码如下：

function word(){
    // 点击触发时再获取最新输入值
    const x1 = parseInt(document.getElementById("x1").value)
    const x2 = parseInt(document.getElementById("x2").value)

    // 校验输入是否为有效整数
    if (isNaN(x1) || isNaN(x2)) {
        document.getElementById("res").innerHTML = "请在两个输入框中填入有效整数"
        return
    }

    const sum = x1 + x2
    document.getElementById("res").innerHTML = sum
}

• 原代码里x1、x2属于全局变量，仅在JS首次加载时赋值一次，不会随着用户输入自动更新
• 如果需要支持小数求和，可以把parseInt替换成parseFloat
• 当前HTML里的form设置了action="GET"，如果后续把按钮类型改成submit，需要额外加事件阻止默认提交行为，否则会触发页面跳转，现有代码用type="button"不会存在这个问题

报错页面效果参考：

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