www.webdeveloper.com
Results 1 to 8 of 8

Thread: getElementById returning null in IE

  1. #1
    Join Date
    Jul 2007
    Posts
    7

    getElementById returning null in IE

    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

  2. #2
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714
    Try if(menuobj == null)

    Have you checked this in any other browser?

  3. #3
    Join Date
    Jul 2007
    Posts
    7
    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.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Question Some questions:

    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?

  5. #5
    Join Date
    Jul 2007
    Posts
    7

    here's everything

    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

  6. #6
    Join Date
    Jul 2007
    Posts
    7

    forgot to answer the questions

    Quote 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

  7. #7
    Join Date
    May 2005
    Location
    Detroit, MI
    Posts
    11
    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).

  8. #8
    Join Date
    Jul 2007
    Posts
    7
    awesome, thanks so much!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles