h1标签innerHTML无法持久显示表单提交值问题求助

问题根源是表单默认的提交行为会触发页面刷新，刚修改的h1内容会随着页面重置变回初始值，所以只显示一瞬间就消失了。

只需要在表单提交的处理函数里阻止默认的页面刷新行为即可，两种实现方式：

方法1：使用event.preventDefault() #

修改你的JS代码，在处理逻辑中添加阻止默认行为的语句：

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

方法2：在函数末尾返回false #

同样可以达到阻止默认行为的效果：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form').onsubmit = function() {
        const name = document.querySelector('#name').value;
        document.querySelector('h1').innerHTML = `Hello ${name}`;
        // 返回false阻止默认提交
        return false;
    };
});

两种方法选其一即可，修改后提交表单时页面不会刷新，h1的内容就能永久显示你输入的值了。

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