Sign in to follow this  

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

This topic is 3376 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
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

This topic is 3376 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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this