为什么在脚本完成运行后，JavaScript仍会导致CSS样式的变化？ [英] Why won't the change in CSS styling caused by JavaScript remain after script finishes running?

问题描述

编辑：标题现在更有意义。

Title makes more sense now.

我目前正在使用流行的Web框架编写基本的CRUD功能。在我的应用的编辑部分，我有一个删除按钮。单击该按钮时，我想要一个包含文本和另外两个按钮的div，让我可以选择继续删除。删除功能由框架处理，工作得很好。

I'm currently writing basic CRUD functionality using a popular web framework. In the edit section of my app, I have a 'Delete' button. When the button is clicked, I want a div containing text and two more buttons to appear, giving me the option to continue with the deletion. The delete functionality is handled by the framework, which is working just fine.

（我讨厌那个内联CSS，但是忍受我，让它变得更容易用于说明目的）

(I hate that inline CSS as much as you do, but bear with me, makes it easier for illustration purposes)

<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：

My JavaScript:

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

当我点击第一个删除按钮时，它的工作时间约为半个第二;叠加div变得可见。然而它消失了，并没有回来。我对JavaScript比较新鲜，虽然不是一般的编程，我假设我完全错过了这种语言的一些细微差别。它似乎不是连续循环该函数，也不会破坏。它只是短暂运行。这或者是一个让我看起来像个傻瓜的愚蠢错字。

When I click the first 'Delete' button it works for about a half a second; the overlay div becomes visible. However it then vanishes, and doesn't come back. I'm relatively fresh to JavaScript, though not programming in general, and I am assuming there's some nuance of the language I'm completely missing out on. It doesn't appear to be looping through the function continuously, nor does it break. It just runs fleetingly. That or a stupid typo that's making me look like a fool.

推荐答案

1. 您点击按钮


2. JavaScript运行并修改加载到浏览器中的DOM


3. 表单提交（因为您点击了提交按钮）


4. 浏览器加载新页面（不会没有使用JS对DOM进行的更改，因为它们只是本地的）

1. You click the button
2. The JavaScript runs and modifies the DOM loaded into the browser
3. The form submits (because you clicked a submit button)
4. The browser loads a new page (which doesn't have the changes you made to the DOM with JS because they were only local)

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

If you don't want to submit the form when you click the button, don't use a submit button. Add type="button".

这篇关于为什么在脚本完成运行后，JavaScript仍会导致CSS样式的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！