Link to home
Start Free TrialLog in
Avatar of pprater1
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.getElementById("ContactUsPanel")) call displays 'null'.
<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>

Open in new window

Avatar of ppittle
ppittle
Flag of United States of America image

pprater1,

You might find this more useful.  When you call getElementById("ContactUsPanel") returns an object.  If you're trying to get the value of, say a TextBox you can use getElementById("PhoneTextBox").value, as I did in the example.

PJ
<head runat="server">
    <title>Untitled Page</title>
 
    <script language="javascript" type="text/javascript">
 
function togglePanel()
{
    alert(document.getElementById("PhoneTextBox").value);
}
 
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
        <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>
    </form>
</body>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of wht1986
wht1986
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Try this:
function togglePanel()
{
    alert(document.getElementById('<%=ContactUsPanel.ClientID%>'));
}

Open in new window

try this
alert(document.getElementById('<%=ContactUsPanel.ClientID %>');
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("MyObjectId").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.
<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>

Open in new window

Avatar of pprater1
pprater1

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.