getElementById returning null in IE

**emmav413** · 07-17-2007, 11:07 AM

I'm pretty sure I've mucked something up but need a second set of eyes to spot it for me right now. Been staring at it too long.

I'm trying to create a right-click context menu. I feel that I'm very close, but every time I try to get the menu object I get null. In fact, I am unable to get any element if I change the id string. I do get the alert though, so I know I'm at least running that line.

Here's the javascript I'm using:

Code:

if (isValidIE || isValidNetscape)
{
   var menuobj = document.getElementById( "myId" );
   if ( null == menuobj )
   {
      alert("menu obj is null");
   }
}

And here's my html for the menu, in case it's usefull:

Code:

<div id='myId' class='skin0' onMouseover='highlight(event);' display:none>
   <div class="menuitems">Show all records</div>
   <div class="menuitems">Sort hits</div>
   <div class="menuitems">Multi-sort hits</div>
   <div class="menuitems">Query</div>
   <div class="menuitems">Query hits</div>
</div>

Any ideas?

Thanks,
em

**Mr Initial Man** · 07-17-2007, 11:22 AM

Try if(menuobj == null)

Have you checked this in any other browser?

**emmav413** · 07-17-2007, 11:28 AM

Still is found to be null. I've tried it in Firefox and am not seeing this alert. However, when I try to use menuobj later in the code, it says that it's null in both Firefox and IE.

**JMRKER** · 07-17-2007, 11:57 AM

Is there more code?

Is the 'onMouseOver' calling the unfinished function (not labeled as 'highlight')?
Where is the 'isValidIE' and 'isValidNetscape' defined?
Does the menu display with a mouse hover or a mouse right-click?
What is the 'event' being passed, the hover or the right-click?

**emmav413** · 07-17-2007, 12:14 PM

k, here's everything

html:

Code:

<html>
<head>
    <title>Dummy Query Tool</title>
    <link rel='stylesheet' type='text/css' href='dummyquery.css'>
  
   <script language="JavaScript">
      var browserName = navigator.appName; 
      var browserVersion = parseInt(navigator.appVersion);
      
      var isValidIE =  (('Microsoft Internet Explorer' == browserName)
                     &&(browserVersion >= 4 )); 
                     //TODO ev - figure out why we're getting wrong version #
                     
      var isValidNetscape =  ('Netscape' == browserName)
                           &&(browserVersion >= 7 );                                                                                                                                                                
   </script>   
    
</head>
<body>
    <script language='Javascript' type='text/javascript' src='dummyquery.js'>
    </script>
        
    <input id='multiCriteriaButton' type='button' value='Multi-Criteria Query' 
        onClick='OpenMultiCriteriaQuery();'>
               
    <input type='button' value='Generate Report'
         onClick='OpenReportGeneration();'>          
            
    <form name='queryForm'>    
        <div id='myId' class='skin0' onMouseover='highlight(event);' display:none>
            <div class="menuitems">Show all records</div>
            <div class="menuitems">Sort hits</div>
            <div class="menuitems">Multi-sort hits</div>
            <div class="menuitems">Query</div>
            <div class="menuitems">Query hits</div>
        </div>                
                                        
        <p>
            FIELD LIST        
            <button id='saveQuery' type='button'>
                <img src="goodstar.bmp" height=15 width=15>
            </button>
            <select id='savedQueries' name='savedQueries'>
                <option>No saved queries...</option>
            </select>
        </p>        
                
        <!-- Add the field list -->
        <div id='fieldListDiv' class="container">                
           <select id='fieldList' name='fieldList' size='10'
               onContextMenu='showFieldListMenu(event);'>
               <!-- onClick='hideFieldListMenu();'> -->
           </select> 
        </div>                  
             
        <p>
            HIT LIST
            <button id='sortButton' type='button'> 
                <img src="downarrow.bmp" height=10 width=10 align='middle'>      
            </button>       
            <input id='queryText' type='text' name='queryText'>  
        </p>  
         
        <!-- Add the hit list -->    
        <select id='hitList' name='hitList' size='20'>       
        </select>
         
        <p>
            <input id='populateButton' type='button' name='populateButton' 
                value='Populate Fields' onClick='PopulateFields();'>
        </p>                      
    </form>          
</body>
</html>

javascript:

Code:

function PopulateFields()
{  
    var newOption;
    
    for ( i = 0; i < 16; i++ )
    {
        newOption = new Option();    
        newOption.text = "Field " + i;
        queryForm.fieldList.options[i] = newOption;
    }
}
                 
function onFieldListContextMenu()
{   

}

function OpenMultiCriteriaQuery()
{
   var queryWindow = window.open( "MultiCriteriaQuery.html", 
                                  "multi_criteria_query",
                                  "width=800,height=700,resizable=no", 
                                  true );
}    

function OpenReportGeneration()
{
   var queryWindow = window.open( "ReportGeneration.html", 
                                  "report_generation",
                                  "width=600,height=500,resizable=no", 
                                  true );
} 

// Context menu stuff
if (isValidIE || isValidNetscape)
{  
   var menuobj = document.getElementById( "myId" )
   if ( null == menuobj )
   {
      alert("menu obj is null");
   }
}          


function showFieldListMenu( event )
{
   //Find out how close the mouse is to the corner of the window
   //var rightedge=isValidIE? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX;
   //var bottomedge=isValidIE? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY;

   if ( menuobj != null )
   {
      //if the horizontal distance isn't enough to accomodate the width of the context menu
      if (rightedge < menuobj.offsetWidth)
      {
      //move the horizontal position of the menu to the left by it's width
         menuobj.style.left = isValidIE? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth;
      }
      else
      {
      //position the horizontal position of the menu where the mouse was clicked
         menuobj.style.left = isValidIE? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX;
      }
   
      //same concept with the vertical position
      if (bottomedge<menuobj.offsetHeight)
      {
         menuobj.style.top = isValidIE? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight;
      }
      else
      {
         menuobj.style.top = isValidIE? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY;
      }
      menuobj.style.visibility="visible";
   }
   else
   {
      alert("menuobj was null in showFieldList");
   }   
   return false;
}

function hideFieldListMenu(event)
{
   if ( null != menuobj )
   {
      menuobj.style.visibility="hidden"
   }
   else
   {
      alert("menuobj was null in hideFieldList");
   }
}

function highlight(e)
{
   var firingobj=isValidIE ? event.srcElement : e.target;
   if (   (firingobj.className == "menuitems") 
       || (isValidNetscape&&firingobj.parentNode.className == "menuitems") )
   {
      if ( isValidNetscape&&firingobj.parentNode.className == "menuitems" ) 
      {
         firingobj=firingobj.parentNode; //up one node
      }
      firingobj.style.backgroundColor="highlight";
      firingobj.style.color="white";
   }
}

if (isValidIE || isValidNetscape)
{
   if ( null != menuobj )
   {
      menuobj.style.display='';
   }
   else
   {
      alert("menuobj was null in init");
   }
}

css:

Code:

BODY {color: black; text-align: left; background: D7E4FF;}
#fieldList {width: 300; z-index: 5;}
#fieldListDiv { width: 300; }
#hitList {width: 300;}
#saveQuery {position: relative; left: 40;}
#savedQueries {width: 150; position: relative; left: 45;}
#queryText {width: 125; position: relative; left: 93;}
#sortButton {position: relative; left: 45; }


.skin0
{
   position:absolute;
   width:165px;
   border:2px solid black;
   background-color:menu;
   font-family:Verdana;
   line-height:20px;
   cursor:default;
   font-size:14px;
   z-index:100;
   visibility:hidden;
}

.menuitems
{
   padding-left:10px;
   padding-right:10px;
}

and if it's helpful, I'm trying to use the code here to create a context menu that will appear on top of a select list.

Thank you so much for taking a look

**emmav413** · 07-17-2007, 12:17 PM

Originally Posted by JMRKER

Is there more code?

Is the 'onMouseOver' calling the unfinished function (not labeled as 'highlight')?
Where is the 'isValidIE' and 'isValidNetscape' defined?
Does the menu display with a mouse hover or a mouse right-click?
What is the 'event' being passed, the hover or the right-click?

right, so to answer those questions:

*the unfinished function isn't actually in a function. it's supposed to be done when the page loads (i think... i'm very new to this...)

*they're defined in the <head> of the document

*menu should display w/ a mouse-right click on the <select> list called fieldList

*i hope the right-click is the event being passed

:-) thanks

**Gerald Bocci** · 07-17-2007, 03:39 PM

It's a scope issue (and I don't mean the mouthwash).

You are attempting to access a page element that hasn't been created yet. Try moving this:

Code:

<script language='Javascript' type='text/javascript' src='dummyquery.js'>

to the end of the page (just before or just after the </body> tag).

JavaScript that is outside a function will execute as the page loads, in the order it is loaded. It's not going to wait for the rest of the document, like you were expecting. This

Code:

if (isValidIE || isValidNetscape)...

is executing right after the <body> tag, but before any other page elements have been created.

A better solution would be to wrap that bit of code in a function, and to call it from the onload event of the <body> tag.

Code:

<body onload="runMeFirst();">

and

Code:

function runMeFirst()
{
   // Context menu stuff
   if (isValidIE || isValidNetscape)
   {
      var menuobj = document.getElementById( "myId" )
      if ( null == menuobj )
      {
         window.alert("menu obj is null");
      }
   }
}

If you did that, then the external .js file could be loaded in the <head> section (or anywhere else).