javascript - 为什么JavaScript引起的CSS样式变化在脚本运行结束后不会保留？

Question

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

我目前正在使用流行的网络框架编写基本的 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"。