HTML表单提交后输出仅显示毫秒级时长的问题求助

核心原因 #

你遇到的问题源于表单的默认提交行为：HTML中的<form>元素，当点击内部未指定type的<button>时，按钮默认是submit类型，浏览器会自动触发表单提交操作——如果<form>没设置action属性，就会刷新当前页面。页面刷新后，所有通过JS修改的DOM内容（背景色、result的文本）都会被重置为初始状态，所以你看到的输出只会闪一下就消失。

而event.preventDefault()的作用就是阻止浏览器的这个默认提交行为，让页面不会刷新，你的JS修改内容就能保留下来。

两种解决方法 #

方法一：在函数中阻止默认行为 #

修改JS函数，接收event参数并调用preventDefault()：

var my_name = "harhu";
var my_password = "harshali";

function my_form(event) {
    // 阻止表单默认提交刷新页面的行为
    event.preventDefault();
    var a = document.getElementById("nameForm").value;
    var b = document.getElementById("passForm").value;
    
    if (a == my_name && b == my_password) {
        document.body.style.backgroundColor = "green";
        document.getElementById("result").innerHTML = "Access granted! Welcome!";
    } else {
        document.body.style.backgroundColor = "red";
        document.getElementById("result").innerHTML = "Access denied! Try again.";
    }
}

同时修改HTML的按钮，把event传递给函数：

<button onclick="my_form(event)">Submit</button>

方法二：修改按钮类型为button #

直接把按钮的type设为button，这样按钮就不会触发表单的默认提交行为，点击只会执行你的JS函数：

<button type="button" onclick="my_form()">Submit</button>

这种方法不需要修改JS代码，更简洁。

补充说明 #

如果之后你需要真正提交表单（比如把数据发送到服务器），就不需要阻止默认行为，但当前你只是做前端验证反馈，以上两种方法都能解决问题。

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