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.