Javascript issue that works in IE and not Firefox

Question

I am running into an issue when troubleshooting a web page that works in IE but not Firefox. The Firefox debugger is stopping on the following line:

btnhelp = new button("btnhelp", framemenu.document.imghelp, "../images/gui/help_o.jpg", "../images/gui/help.jpg", "", "hand", true);

I see that button is defined in another class with some prototype functions as so:

function button(jscriptname, htmlobj, dnimg, dimimg, action, cursor, enabled, hlimg)
{
  //object for managing buttons easily
  this.img = htmlobj;

  if(htmlobj.name)
    this.name = htmlobj.name
  else if(htmlobj.id)
    this.name = htmlobj.id
  else
    this.name = "error";

  this.upimg = new Image();
  this.dnimg = new Image();
  this.dimimg = new Image();
  this.hlimg = new Image();

  this.upimg.src = this.img.src;
  this.dnimg.src = dnimg;
  this.dimimg.src = dimimg;
  if(hlimg)
    this.hlimg.src = hlimg;
  this.action = action;
  this.jscriptname = jscriptname;

  if(cursor)
    this.cursor = cursor;
  else
    this.cursor = "hand";

  if(enabled)
    this.enable();
  else
    this.disable();

  this.img.onclick= new Function(this.jscriptname + ".click();");
  this.img.onmouseover= new Function(this.jscriptname + ".mouseover();");
  this.img.onmouseout= new Function(this.jscriptname + ".mouseout();");
}

button.prototype.enable = _enable;
button.prototype.disable = _disable;
button.prototype.mouseover = _mouseover;
button.prototype.mouseout = _mouseout;
button.prototype.click = _click;
button.prototype.hilight = _hilight;

function _enable()
{
    this.img.src = this.upimg.src;
    this.img.style.cursor = this.cursor;
    this.enabled = true;    
}

function _disable()
{
    this.img.src = this.dimimg.src;
    this.img.style.cursor = "default";  
    this.enabled = false;
}

function _hilight(bool)
{
    this.img.src = this.hlimg.src;  
    this.enabled = bool;
}

function _mouseover()
{
    if(this.enabled)
        this.img.src = this.dnimg.src;
}

function _mouseout()
{
    if(this.enabled)
    {
        this.img.src = this.upimg.src;
    }
}

function _click()
{
    if(this.enabled)
        eval(this.action);

}

When the debugger does hit the bthhelp = new button line, it goes to nsSessionStore.js:

  handleEvent: function sss_handleEvent(aEvent) {

Once it exits this function, it is not returning to the JavaScript and the next line is never being called, leading me to think that there is a problem in the call to make a new button. Does anyone know what I need to do to fix this?

Answer 1

If Firefox is halting on the line

btnhelp = new button("btnhelp", framemenu.document.imghelp, "../images/gui/help_o.jpg", "../images/gui/help.jpg", "", "hand", true);

The only potential issues could be either button isn't defined yet or there's a problem with framemenu.document.imghelp. All other arguments are primitives so I can't see why there would be a problem with any of those.

I'd guess -- which is about as much as anyone could give you without a bit more information -- that the problem is that framemenu is the ID of an element in your document, but isn't actually defined as a variable. Internet Explorer automatically registers all elements with a valid id attribute as globals that can be accessed from script without having to use document.getElementById(). No other browser does that, you have to use document.getElementById() or some other form of element selection.