修改display属性后警告框自动消失，如何使其保持可见直至手动关闭？

嘿，你遇到的这个警告框秒没的问题，根源其实是那个<button type="submit">按钮——点击它的时候，浏览器会同时做两件事：

1. 执行你写的JS代码，显示警告框
2. 触发表单的默认提交行为，直接刷新页面

页面一刷新，所有元素都会回到初始状态（也就是你一开始用JS设置的display: none），所以警告框刚露个脸就没了。

办法1：阻止表单提交的默认行为 #

修改你的JS代码，在点击事件里加上阻止默认行为的逻辑，让按钮只执行显示警告框的操作：

// 初始隐藏警告框
document.getElementById("error").style.display = "none";

document.getElementById("submit").onclick = function(e) {
    // 关键：阻止表单提交刷新页面
    e.preventDefault();
    // 显示警告框
    document.getElementById("error").style.display = "";
}

办法2：把按钮类型改成button #

如果你的表单不需要通过这个按钮提交数据，直接把按钮的type从submit改成button，这样就不会触发表单提交了：

<button type="button" id="submit" class="submit">Submit</button>

其实你可以把初始隐藏警告框的逻辑放到CSS里，比用JS更靠谱：

#error {
    display: none; /* 初始状态隐藏 */
}
.alert-er { 
    padding: 20px; 
    background-color: #ff2400; 
    color: #ffffff; 
    font-size: 20px; 
    border: 1px solid white; 
    border-radius: 20px; 
}
.closebtn { 
    margin-left: 15px; 
    color: white; 
    font-weight: bolder; 
    float: right; 
    font-size: 40px; 
    line-height: 20px; 
    cursor: pointer; 
    transition: 0.3s; 
}
.closebtn:hover { 
    color: black; 
}

这样JS里就不用一开始写document.getElementById("error").style.display = "none";了，直接控制显示就行~

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