为什么我的.innerHTML仅生效一秒？表单提交后内容闪烁消失求助

问题出在表单的默认提交行为：点击提交按钮时，浏览器会自动触发表单提交并刷新页面，导致你设置的h1内容刚显示就被页面刷新覆盖了。下面是两种可行的解决办法：

方法一：阻止表单默认提交行为 #

在表单的onsubmit事件处理函数中，添加event.preventDefault()来阻止浏览器的默认刷新行为，修改后的代码如下：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form').onsubmit = function(event) {
        // 阻止表单默认提交刷新
        event.preventDefault();
        
        const word = document.querySelector('#wrd').value;
        document.querySelector('h1').innerHTML = word;
    }
});

方法二：改用普通按钮替代提交按钮 #

如果你的需求只是获取输入内容并展示，不需要向服务器提交表单数据，可以把表单里的提交按钮改成普通按钮，然后监听按钮的click事件：

HTML修改示例： #

<!-- 将type="submit"改为type="button" -->
<input type="button" id="showBtn" value="展示内容">

对应JS代码： #

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#showBtn').onclick = function() {
        const word = document.querySelector('#wrd').value;
        document.querySelector('h1').innerHTML = word;
    }
});

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