JS实现将输入框值赋值给h4的innerHTML时，点击按钮后h4为空是怎么回事？

你代码里对输入框取值的时机设置错误，最终导致取到的永远是输入框的初始空值。
执行顺序上，DOMContentLoaded触发时页面刚加载完成，用户还没来得及在输入框输入任何内容。你在这个节点执行let input = document.getElementById('input').value，会把当时输入框的空值作为固定值存入变量。后续点击按钮时，代码直接用这个提前存好的空值给h4赋值，完全不会读取用户之后在输入框输入的内容，自然会让h4变成空。

把读取输入框实时内容的操作，移动到按钮点击的回调函数内部，在点击发生的瞬间再取输入框的当前值即可，修正后的代码如下：

document.addEventListener('DOMContentLoaded', () => {
    const h4 = document.getElementById('h4');
    const button = document.getElementById('button');
    const inputElement = document.getElementById('input');
    button.onclick = () => {
        // 点击瞬间实时读取输入框的最新取值
        const inputValue = inputElement.value;
        h4.innerHTML = inputValue;
    };
});

可选优化 #

• 读取值后可通过.trim()方法去除输入内容前后的无效空格
• 不要提前存储.value的取值结果，只保存DOM元素的引用，需要用值的时候再实时读取，避免出现取值过期的问题

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