Unable to capture XUL Panel Element in javascript

I am trying to access XUL Panel Element through javascript to open and close it dynamically.

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css"
  href="chrome://textareaauto开发者_如何学Pythoncomplete/skin/browserOverlay.css" ?>

<!DOCTYPE overlay SYSTEM
  "chrome://textareaautocomplete/locale/browserOverlay.dtd">

<overlay id="textareaautocomplete-browser-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="application/x-javascript"
    src="chrome://textareaautocomplete/content/browserOverlay.js" />

<stringbundleset id="stringbundleset">
    <stringbundle id="textareaautocomplete-string-bundle"
      src="chrome://textareaautocomplete/locale/browserOverlay.properties" />
  </stringbundleset>

  <menupopup id="menu_ToolsPopup">
    <menu id="xs-textareaautocomplete-menu" label="&textareaautocomplete.menu.label;"
      accesskey="&textareaautocomplete.menu.accesskey;"
      insertafter="javascriptConsole,devToolsSeparator">
      <menupopup>
        <menuitem id="textareaautocomplete-ta-menu-item"
          label="&textareaautocomplete.cache.start.label;"
          accesskey="&textareaautocomplete.cache.accesskey;"
          oncommand="TextareaAutocomplete.BrowserOverlay.main();" />
      </menupopup>
    </menu>
  </menupopup>

  <panel id="textareaautocomplete-ta-dropdown-panel">
    <textbox id="search"/>
  </panel>

</overlay>

try {
  let panel = document.getElementById("textareaautocomplete-ta-dropdown-panel");
  panel.openPopup(node, "after_start", 0, 0, false, false);
}
  catch(e) {
  window.alert("Failed to set drop down: " + e.name + ": " + e.message);
}

This gives me following error message in exception:

panel is null

Please let me know if something is missing or not right! One more point is that I am able to access other elements like stringbundleset, menupopup just by changing the id in same javascript code.

Wrap your panel inside a vbox or hbox For example: in your case

<hbox>
<panel id="textareaautocomplete-ta-dropdown-panel">
    <textbox id="search"/>
  </panel>
<hbox>