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

您点击按钮
JavaScript运行并修改加载到浏览器中的DOM
表单提交（因为您点击了提交按钮）
浏览器加载一个新页面（没有使用JS对DOM进行的更改，因为它们只是本地的）

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

Answer 2

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

脚本完成运行后，为什么JavaScript不会导致CSS样式的更改？

我的HTML：

我的JavaScript：

2 个答案: