为什么在脚本运行完成后，JavaScript引起的CSS样式更改就不会继续存在？

Question

编辑:标题现在更有意义了。

我目前正在使用一个流行的web框架编写基本的CRUD功能。在我的应用程序的编辑部分，我有一个“删除”按钮。当单击该按钮时，我希望出现一个包含文本的div和另外两个按钮，从而使我可以选择继续删除。删除功能是由框架处理的，框架工作得很好。

(我和你一样讨厌内联CSS，但请接受我的建议，这样就可以更容易地进行说明)

我的HTML：

<style type='text/css'>
#overlay {
    visibility: hidden; }
</style>

<form method='POST' action='', enctype='multipart/form-data'> {% csrf_token %}
    {{form.as_p}}
    <input type='submit' name='save' value='Save post'/>
    <button onclick='toggleDeletion()'>Delete</button>

    <div id='overlay'>
        <p>Are you sure you want to delete this post? It&lsquo;ll be lost forever...</p>
        <form method='POST' enctype='multipart/form-data'> {% csrf_token %}
            <input type='submit' name='yes' value='Yes' />
            <button onclick='toggleDeletion()'>No</button>
        </form>
    </div>
</form>

我的JavaScript：

function toggleDeletion() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == 'hidden') ? 'hidden' : 'visible';
}

当我单击第一个“删除”按钮时，它的工作时间约为半秒；覆盖div将变为可见的。然后它就消失了，再也不回来了。我对JavaScript比较陌生，虽然我一般不会编程，而且我认为我完全忽略了这种语言的一些细微差别。它似乎没有连续地遍历函数，也没有中断。它跑得很快。或者是一个愚蠢的错误让我看起来像个傻瓜。

Answer 1

1. 你按一下按钮
2. JavaScript运行并修改加载到浏览器中的DOM
3. 表单提交(因为单击了提交按钮)
4. 浏览器加载一个新页面(没有使用JS对DOM所做的更改，因为它们只是本地的)

如果单击按钮时不想提交表单，请不要使用“提交”按钮。添加type="button"。

Answer 2

当表单提交时，页面会刷新，因此需要在加载文档时重新应用js/css更改.或者使用AJAX提交，并将输入类型从submit更改为按钮/或单击submit按钮返回false。