Original Post
I'm currently working on a website for myself; one where I'll host my projects, a blog that no one will read, etc. Just the usual programmer's website. I'm using Visual Studio 2008, ASP, and C# to code the site. I'm using a master page for my layouts so I don't have to recreate everything for every page. I've started to get to the point where I want to use some javascript for some web effects. Right now I'm trying to create a little menu animation where when the user hovers their mouse over a menu item, a drop down menu rolls out showing some sub menu buttons. However I've discovered there are some issues with ASP and javascript (or maybe it's just me). Whenever I try to get an HTML element in javascript via document.getElementById(), the function returns null. Both the javascript and the element it's trying to access are in the master page, not the content page. Am I doing something wrong? Here is the code I'm using (it's been simplified, but I've tested it so I know these pages compile but still have the javascript issues). MasterPage.master <!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre><%@ Master Language=<span class="cpp-literal">"C#"</span> AutoEventWireup=<span class="cpp-literal">"true"</span> CodeBehind=<span class="cpp-literal">"MasterPage.master.cs"</span> Inherits=<span class="cpp-literal">"mjbshaw.MasterPage"</span> %> <!DOCTYPE html <span class="cpp-keyword">PUBLIC</span> <span class="cpp-literal">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="cpp-literal">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>> <html xmlns=<span class="cpp-literal">"http://www.w3.org/1999/xhtml"</span> > <head runat=<span class="cpp-literal">"server"</span>> <title> <asp:ContentPlaceHolder ID=<span class="cpp-literal">"TitlePlaceHolder"</span> runat=<span class="cpp-literal">"server"</span>></asp:ContentPlaceHolder> </title> <asp:ContentPlaceHolder ID=<span class="cpp-literal">"head"</span> runat=<span class="cpp-literal">"server"</span>></asp:ContentPlaceHolder> <link href=<span class="cpp-literal">"App_Themes/StyleSheet.css"</span> rel=<span class="cpp-literal">"stylesheet"</span> type=<span class="cpp-literal">"text/css"</span> /> <script type=<span class="cpp-literal">"text/javascript"</span>> var button = document.getElementById('<%= menuButton0.ClientID %>'); alert(button); </script> <script src=<span class="cpp-literal">"navigationMenu.js"</span> type=<span class="cpp-literal">"text/javascript"</span>></script> </head> <body> <form id=<span class="cpp-literal">"form"</span> runat=<span class="cpp-literal">"server"</span>> <ul <span class="cpp-keyword">class</span>=<span class="cpp-literal">"navigationMenu"</span>> <li <span class="cpp-keyword">class</span>=<span class="cpp-literal">"menuItem"</span>> <asp:Label ID=<span class="cpp-literal">"projectsButton"</span> runat=<span class="cpp-literal">"server"</span>> <a href=<span class="cpp-literal">"~/projects/"</span> id=<span class="cpp-literal">"menuButton0"</span> runat=<span class="cpp-literal">"server"</span>> Projects </a> </asp:Label> <div id=<span class="cpp-literal">"subMenu0"</span> <span class="cpp-keyword">class</span>=<span class="cpp-literal">"navigationSubMenu"</span>> <a href=<span class="cpp-literal">"#"</span> <span class="cpp-keyword">class</span>=<span class="cpp-literal">"subMenuButton"</span>>sub menu button <span class="cpp-number">1</span></a> <a href=<span class="cpp-literal">"#"</span> <span class="cpp-keyword">class</span>=<span class="cpp-literal">"subMenuButton"</span>>sub menu button <span class="cpp-number">2</span></a> <a href=<span class="cpp-literal">"#"</span> <span class="cpp-keyword">class</span>=<span class="cpp-literal">"subMenuButton"</span>>sub menu button <span class="cpp-number">3</span></a> </div> </li> </ul> <div <span class="cpp-keyword">class</span>=<span class="cpp-literal">"content"</span>> <asp:ContentPlaceHolder id=<span class="cpp-literal">"ContentPlaceHolder"</span> runat=<span class="cpp-literal">"server"</span>> </asp:ContentPlaceHolder> </div> </form> </body> </html> </pre></div><!--ENDSCRIPT--> Default.aspx <!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre><%@ Page Language=<span class="cpp-literal">"C#"</span> MasterPageFile=<span class="cpp-literal">"~/MasterPage.Master"</span> AutoEventWireup=<span class="cpp-literal">"true"</span> CodeBehind=<span class="cpp-literal">"Default.aspx.cs"</span> Inherits=<span class="cpp-literal">"mjbshaw._Default"</span> %> <asp:Content ID=<span class="cpp-literal">"Content1"</span> ContentPlaceHolderID=<span class="cpp-literal">"TitlePlaceHolder"</span> runat=<span class="cpp-literal">"server"</span>> Home Page </asp:Content> <asp:Content ID=<span class="cpp-literal">"Content2"</span> ContentPlaceHolderID=<span class="cpp-literal">"ContentPlaceHolder"</span> runat=<span class="cpp-literal">"server"</span>> Content goes here </asp:Content> </pre></div><!--ENDSCRIPT--> navigationMenu.js <!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre>alert(button); function hover(item) { item.style.color = <span class="cpp-literal">"Red"</span>; } button.onmouseover = function(){hover(<span class="cpp-keyword">this</span>);}; </pre></div><!--ENDSCRIPT--> I even decided to write a simple test html page to see if I am just being dumb, and the following always shows "null" in the message box. Why won't this simple test example work either? <!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre><html> <head> <script type=<span class="cpp-literal">"text/javascript"</span>> var v = document.getElementById(<span class="cpp-literal">"link"</span>); alert(v); </script> </head> <body> <a href=<span class="cpp-literal">"#"</span> id=<span class="cpp-literal">"link"</span>>asdf</a> </body> </html> </pre></div><!--ENDSCRIPT--> Any help would be greatly appreciated!
