Using getElementById inside user control

Question

I have a usercontrol that hides a div when a button is clicked.

<asp:LinkButton ID="lnkbtn" OnClientClick="ShowHide(); return false;" runat="server" />  
<div id="popupPage" style="display:none;">
</div>


 function ShowHideGotoPopUp() {
        var ob = document.getElementById("popupPage");
        if (ob.style.display == "none")
            ob.style.display = "block";
        else ob.style.display = "none"

    }

There is a problem when I place on page more then 1 usercontrol, all controls has div with same id = popupPage.

Answer 1

You should rethink how this works; the ID should be unique for a HTML page.

If however, you want to stick with your current design, something like this should work...

<asp:LinkButton ID="lnkbtn" OnClientClick="ShowHide(this.nextSibling); return false;" runat="server" />  
<div id="popupPage" style="display:none;">
</div>
 function ShowHideGotoPopUp(ob) {
        if (ob.style.display == "none")
            ob.style.display = "block";
        else ob.style.display = "none"

    }

Answer 2

Since your control appears more than once on the same page you will have to generate a unique ID for your div for each instance of your usercontrol, then as Matt suggested change your function to take the div ID as a parameter.

Consider running your div as a server control( unique ID will be generated automatically). You can then access the unique client ID at the Load Event of your user control and pass it on to your function programatically(by setting the 'OnClientClick' attribute for your linkbutton) . ie..

protected void Page_Load(object sender, EventArgs e)
{

//get the unique generated ID     
string divID = yourDiv.ClientID;

//pass it on to your function by setting OnClientClick

yourLinkButton.OnClientClick = "ShowHideGotoPopUp('" + divID + ')";

}