JS简单计算异常：计算结果无法正常显示在H1标签中

咱们来一步步拆解代码里的问题，这就是导致计算结果无法正常显示的核心原因：

1. 事件回调的参数命名冲突 #

你给按钮点击事件的回调函数加了val参数，但这个参数本质是事件对象（Event），不是你想要的输入值。更关键的是，它直接覆盖了外部定义的val变量，导致计算时用的是事件对象而非用户输入的数字，自然出不了正确结果。

2. 获取输入值的时机错误 #

页面刚加载时你就获取了val = Number(document.getElementsByTagName('input')[0].value)，这时候输入框是空的，val的值要么是NaN要么是0。用户点击按钮时，你用的还是这个初始值，根本没拿到用户输入的最新内容。

修正后的完整JS代码 #

// 提前获取DOM元素，这部分可以放在页面加载阶段
const input = document.getElementsByTagName('input')[0];
const h1 = document.querySelector('h1');
const button = document.querySelector('button');

button.addEventListener('click', function() { // 移除冲突的val参数
    // 点击按钮时才获取最新的输入值
    const val = Number(input.value);
    // 增加输入有效性判断，避免NaN的情况
    if (!isNaN(val)) {
        let result = val + (val * 0.2);
        h1.textContent = result;
    } else {
        h1.textContent = '请输入有效数字';
    }
});

改动说明 #

• 将获取输入元素的操作提前，但获取输入值的动作放在点击事件内部，确保每次点击都能拿到用户最新输入的内容。
• 去掉回调函数里的val参数，既避免变量覆盖，也符合事件回调的参数规范（如果需要事件对象，可以用e这类通用命名）。
• 新增isNaN判断，处理用户输入非数字的场景，让页面交互更健壮。

替换成这段代码后，点击按钮就能正常显示计算结果啦！

内容的提问来源于stack exchange，提问作者D.Tsiridakis