Click here to Skip to main content
15,922,533 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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;
Updated 9-Aug-18 4:12am
RmcbainTheThird 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.
RmcbainTheThird 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?
RmcbainTheThird 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

1 solution

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.
Share this answer

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900