Click here to Skip to main content
13,738,803 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have a javascript function on my content page to hide all divs and show the one passed in. Every time the script executes it returns a null when trying to get the element via document.getElementById.

<div id="Tab2" runat="server"  /div>

I have tried two different ways to build the id of the div and neither one works.
function openLink(evt, animName) {
     var i;
     var x = document.getElementsByClassName("diy");
     for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
     var divName = "ctl00_MainContent_" + animName;
     var tst = document.getElementById(divName); = "block";
     switch (animName) {
        case "Tab2":
           var el2 = document.getElementById("<%=Tab2.ClientID%>");
  = "block";
        case "Tab3":
           var el3 = document.getElementById("<%=Tab3.ClientID%>");
  = "block";


Any thoughts

What I have tried:


tl00_MainContent_" + animName;
Posted 9-Aug-18 4:02am
Updated 9-Aug-18 4:12am
Member 12288785 9-Aug-18 10:21am
I have looked at the rendered code and the id matches what I am building in the javascript. and the Ids I am building in the javascript match the rendered html. most aggravating
F-ES Sitecore 9-Aug-18 10:49am
Check you're not calling openLink before the tabs are rendered on the page. If you do something like

<script>openlink(e, "Tab2");...

<div id="Tab2" ...

then the javascript runs right away but the div hasn't been loaded into the DOM yet. So make sure your script is always below the elements they are referencing.
Member 12288785 9-Aug-18 11:08am
The code is executed on a button click so everything is rendered before the method is executed
<asp:Button class="tabdiy tablink tabwidth" CommandArgument="2" OnClientClick="openLink(event, 'Tab2')" ID="btnDIY2" runat="server">
Dennis E White 15-Aug-18 11:13am
have you tried running the code in something like chrome developer tools?
Member 12288785 15-Aug-18 14:15pm
Yes I have and the GetelementbyID always returns a null even though I can see the name of the element in the developer tools and it matches what is in the javascript method
Dennis E White 16-Aug-18 10:18am
so if you are formatting your call to getElementById(..) properly and running this from developer tools but it's returning null then the problem is most likely going to be one of the following:

- the element you are searching for wasn't properly closed.
- you have multiple elements sharing the same id.
Member 12288785 17-Aug-18 14:37pm
Well double checked both thoughts all good. and besides while trying to get this to work I added an event to the code behind to do the same thing and no problem there finding the divs( have I mentioned that I hate javascript)

for (int idx = 1; idx <= 7; ++idx)
HtmlControl div = cp.FindControl(divName + idx) as HtmlControl;
Button btn = (Button) cp.FindControl(btnName + idx);

if (idx != id)
btn.CssClass = "tabdiy button";
div.Visible = false;
btn.CssClass = "tabdiyactive";
div.Visible = true;
Dennis E White 17-Aug-18 15:09pm
without actually seeing everything I can't help more. there is no reason for getElementById() to return null if everything is there properly.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

after the page renders have you looked at its output in the browser?

<%= >
is an encapsulation for server side code that helps in the page rendering. so you should be able to view the output in the browser you are using.

I would check the HTML source in the browser and see what you are getting as the first step.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Cookies | Terms of Service
Web01-2016 | 2.8.180920.1 | Last Updated 9 Aug 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100