pprater1
asked on
getElementByID not getting element
I have read many posts about problems with getElementByID, but I do not understand why my code is not working. My assumption is that it has something to do with the fact that when the page is rendered, a prefix is added to the ID of my element - if this is true, why would this function do any good to begin with??
I have an ASP.Net page and all I want to do is get an element by it's ID. The code posted is from a WebUserControl. The alert(document.getElementB yId("Conta ctUsPanel" )) call displays 'null'.
I have an ASP.Net page and all I want to do is get an element by it's ID. The code posted is from a WebUserControl. The alert(document.getElementB
<asp:Button ID="ContactUsBtn" runat="server" Text="Contact Us" UseSubmitBehavior="true" OnClientClick="togglePanel(); return false;" />
<asp:Panel ID="ContactUsPanel" runat="server" CssClass="ContactUsPanel">
<asp:Label ID="PhoneLabel" runat="server" Text="Phone:"></asp:Label>
<asp:TextBox ID="PhoneTextBox" runat="server"></asp:TextBox>
<asp:Button ID="SubmitBtn" runat="server" Text="Submit" />
</asp:Panel>
<script language="javascript" type="text/javascript">
function togglePanel()
{
alert(document.getElementById("ContactUsPanel"));
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try this:
function togglePanel()
{
alert(document.getElementById('<%=ContactUsPanel.ClientID%>'));
}
try this
alert(document.getElementB yId('<%=Co ntactUsPan el.ClientI D %>');
alert(document.getElementB
The reason why it returns NULL is that you are trying to alert the element itself.
To get the elements value, you can add .value like this:
document.getElementById("M yObjectId" ).value
However, I see that you are referring to the asp:Panel object which renders out as an div tag. Div tags doesn't have values. So instead of using .value you sould use .innerHTML to get everything inside the div.
It looks to me like you are trying to hide/show the panel with the Contact Us button. If so, I've added the javascript of how you can achieve that.
To get the elements value, you can add .value like this:
document.getElementById("M
However, I see that you are referring to the asp:Panel object which renders out as an div tag. Div tags doesn't have values. So instead of using .value you sould use .innerHTML to get everything inside the div.
It looks to me like you are trying to hide/show the panel with the Contact Us button. If so, I've added the javascript of how you can achieve that.
<script language="javascript" type="text/javascript">
function togglePanel() {
if ( document.getElementById("ContactUsPanel").style.visibility == "hidden" ) {
document.getElementById("ContactUsPanel").style.visibility = "visible";
}
else {
document.getElementById("ContactUsPanel").style.visibility = "hidden";
}
}
</script>
ASKER
My ultimate goal here was not to alert an object - I just wanted to know that I have a handle on any object through getElementByID. Alerting a found object will spit out [object]. Joachim is correct, I do have code similar, but what you posted is exactly what is not working - thus the test code.
You might find this more useful. When you call getElementById("ContactUsP
PJ
Open in new window