innerHTML失效问题：登录后Welcome文本闪烁消失的原因排查

嘿，我一眼就看出问题所在啦！你遇到的Welcome文本闪烁后消失的情况，根源在于表单的默认提交行为：

你用了<input type="submit">按钮，点击它的时候，浏览器不仅会执行你写的validate()函数，还会默认提交整个表单并刷新页面——这就是为什么你刚设置的innerHTML内容，瞬间就随着页面刷新被清空了。

下面给你两种简单的解决办法：

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

修改你的validate()函数，在函数末尾添加return false;，这样就能阻止浏览器的默认表单提交动作：

function validate(){
    if(document.getElementById("username").value=="Tushar"&&document.getElementById("password").value=="tushar"){
        alert("Hello");
        document.getElementById("content").innerHTML = '<h1 id = "welcome" style="font-size: 25px;color:#ffffff; ">Welcome</h1>';
    } else{
        alert("Invalid username/password");
    }
    // 阻止表单默认提交刷新
    return false;
}

你的HTML里的submit按钮已经写了onclick ="return validate()"，所以函数返回false后，就能彻底阻止页面刷新啦。

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

把<input type="submit">改成<input type="button">，这样按钮就不会触发表单的默认提交行为，只会执行你的validate()函数：

<input type = "button" onclick ="validate()" value ="Login">

这种方法更直观，不需要处理返回值，适合不想修改太多JS代码的情况。

两种方法选一个就行，测试后Welcome文本就能正常显示啦！

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