JS登录函数执行后动态创建的欢迎标题元素消失问题

表单内的<button>标签默认type属性值为submit，点击登录按钮时，除了触发绑定的logIn()函数，还会触发表单默认的提交跳转、页面刷新行为。通过JS动态插入的欢迎标题存储在当前页面运行内存中，页面刷新后所有动态生成的DOM内容都会被重置清空，最终出现欢迎标题闪现后直接消失的现象。

• 核心修复：解决表单默认提交导致页面刷新的问题，两种实现方式选其一即可
  • 简便实现：给登录按钮显式添加type="button"属性。按钮位于表单内时默认type为submit，显式设置为button后就不会触发表单提交刷新逻辑
  • 逻辑实现：给logIn函数传入事件对象，调用方法阻止默认提交行为
• 可选优化：插入欢迎标题前先清空#Welcome容器的原有内容，避免用户多次点击登录时重复追加多个欢迎标题。

方案1：修改按钮type（无需调整JS传参） #

只需要修改HTML中的登录按钮标签：

<button type="button" onclick="logIn();"><h2>Log in</h2></button>

对应优化后的JS代码：

function logIn() {
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        var welcomeVar = document.createElement("h1");
        welcomeVar.innerHTML = "Welcome, " + email;
        const welcomeContainer = document.getElementById("Welcome");
        // 插入前清空容器，避免重复生成标题
        welcomeContainer.innerHTML = '';
        welcomeContainer.appendChild(welcomeVar);
}

方案2：阻止默认提交行为 #

修改HTML中按钮的事件绑定，传入事件对象：

<button onclick="logIn(event);"><h2>Log in</h2></button>

对应JS代码：

function logIn(e) {
        // 阻止表单默认提交刷新
        e.preventDefault();
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        var welcomeVar = document.createElement("h1");
        welcomeVar.innerHTML = "Welcome, " + email;
        const welcomeContainer = document.getElementById("Welcome");
        welcomeContainer.innerHTML = '';
        welcomeContainer.appendChild(welcomeVar);
}

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