Edit: Title makes more sense now.

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.

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

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

```

My JavaScript:
--------------

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

```

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.