getElementById returning null in IE

@emmav413Jul 17.2007

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”); } } [/CODE]

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> [/CODE]

Any ideas?

Thanks,
em

to post a comment

JavaScript

7 Comments(s) _↴

@Mr_Initial_ManJul 17.2007 — #Try [i]if(menuobj == null)[/i]

Have you checked this in any other browser?

@emmav413authorJul 17.2007 — #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.

@JMRKERJul 17.2007 — #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?

@emmav413authorJul 17.2007 — #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>
 [/CODE]

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");
 }
 }
 
 
 [/CODE]

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;
 } 

 [/CODE]

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

@emmav413authorJul 17.2007 — #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?[/QUOTE]

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_BocciJul 17.2007 — #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'>[/CODE] to the end of the page (just before or just after the </body> tag).

JavaScript that is outside a function will execute [I]as the page loads, in the order it is loaded[/I]. It's not going to wait for the rest of the document, like you were expecting. This [CODE]if (isValidIE || isValidNetscape)...[/CODE] 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();">[/CODE]
and

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

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

@emmav413authorJul 18.2007 — #awesome, thanks so much!

Also in #JavaScript _↴

OOP Javascript-Determine instance's object type and make a new instance of that type Refresh webpage after timeout java script

Success!

Help @emmav413 spread the word by sharing this article on Twitter...

Tweet This

getElementById returning null in IE

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴