单击按钮显示div

Question

I have a div, whose display is set to none. On button click, I need to show this div.
I have wrote a JavaScript function to do so, and it works but on click of the button the div is shown and again it hides. What is to be done additionally so that is remains.

JavaScript is as follows:

function show_popup() {
    document.getElementById("Div1").style.display = 'block';
}

And div is as follows:

<div id="Div1" style="display:none">

The JavaScript function is called on button click as follows:

<asp:Button ID="Button3" runat="server"  OnClientClick="javascript: show_popup()"  Text="Button" />

Please help me out.

Answer 1

If I interpret your question correctly: the div resets to be hidden on page refresh or navigation. This is to be expected, the display value should be handled on the server side too.

As others have said, the problem is that when you click on the button, the page is posted to the server. If you do not want to do this, you should use a normal HTML button (with type="button" ), instead of an ASP one.

Answer 2

Your Javascript is working, the Problem seems to be the Button implemented with ASP.

The Problem could be the Serversided implementation of the Button, here is the HTML implementation. Things are working there.

 function show_popup() { document.getElementById("Div1").style.display = 'block'; } 

 <div id="Div1" style="display:none">asdasdasdasdasdasd</div> <input type="button" onclick="show_popup()" value="Show"></input>