Jump to content
  • Advertisement
Sign in to follow this  
Cornstalks

[web] JavaScript on my ASP .NET site can't access HTML elements

This topic is 3589 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="mjbshaw.MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head runat="server">
    <title>
        <asp:ContentPlaceHolder ID="TitlePlaceHolder" runat="server"></asp:ContentPlaceHolder>
    </title>
    
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
    
    <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
        var button = document.getElementById('<%= menuButton0.ClientID %>');
        alert(button);
    </script>
    
    <script src="navigationMenu.js" type="text/javascript"></script>
</head>
<body>
    <form id="form" runat="server">
    
        <ul class="navigationMenu">
            <li class="menuItem">
                <asp:Label ID="projectsButton" runat="server">
                    <a href="~/projects/" id="menuButton0" runat="server">
                        Projects
                    </a>
                </asp:Label>
                <div id="subMenu0" class="navigationSubMenu">
                    <a href="#" class="subMenuButton">sub menu button 1</a>
                    <a href="#" class="subMenuButton">sub menu button 2</a>
                    <a href="#" class="subMenuButton">sub menu button 3</a>
                </div>
            </li>
        </ul>
            
        <div class="content">
            <asp:ContentPlaceHolder id="ContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>
Default.aspx
<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="mjbshaw._Default" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitlePlaceHolder" runat="server">
    Home Page
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    Content goes here
</asp:Content>
navigationMenu.js
alert(button);
 
function hover(item)
{
    item.style.color = "Red";
}
 
button.onmouseover = function(){hover(this);};
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?
<html>
<head>

<script type="text/javascript">

var v = document.getElementById("link");

alert(v);

</script>

</head>

<body>

<a href="#" id="link">asdf</a>

</body>
</html>
Any help would be greatly appreciated!

Share this post


Link to post
Share on other sites
Advertisement
I believe it's because the javascript code that you don't put within a function is executed before the page is finished loading. The element "link" in your test doesn't exist yet. If you put the code in an onload statement, it works fine.

See:

<script type="text/javascript">
function test () {

var v = document.getElementById("link");

alert(v);


}
</script>

</head>

<body onload="test()">

<a href="#" id="link">asdf</a>

</body>
</html>

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!