Question

I’m using JavaScript to create and remove elements from a web page. I’ve got it working in every browser except Firefox. In Firefox it will create the element, remove the element, re-create the element but after re-creating the element it returns a “not found” type error saying the element doesn’t exist and it gets stuck predominantly on the screen at that point.

This creates the Image:

function createMOImage( objId )
{
    var img = document.createElement('img');
    var leftOffset = document.getElementById( objId ).offsetLeft;

    img.src = 'images/pre-butt-mo.png';
    img.style.position = 'absolute';
    img.style.left = leftOffset + "px";
    img.style.opacity = '0.2';
    img.style.zindex = '9';
    img.id = 'temp';
    img.onmouseout = function () { moff( objId ); };

    return img;
}

As you can see, the image created is given a mouse out event calling this function:

function moff( objId )
{
    var container = document.getElementById( 'container' );
    var temp = document.getElementById( 'temp' );

    removeMOImage( );
    changeButt( objId );

    return;
}

The change function works perfectly fine but it’s not getting called because the JavaScript is being terminated in the removeMOImage() function:

function removeMOImage(  )
{
    if ( img = document.getElementById('temp') )
    {
        img.parentNode.removeChild( temp );
    } else {
        return;
    }
}

The removeChild function is returning the not found despite the fact the element was successfully recreated in the create function.

I tested in IE Chrome Opera and Firefox and the only one having issues is Firefox. There were a few other FF specific issues I had to overcome, most of which were solved from other stack overflow threads; however, I could not find a solution to this issue.

This is the full JavaScript c&p from the source:

function mon( objId )
{

    var container = document.getElementById( 'container' );
    var img = createMOImage( objId );

    container.appendChild( img );
    changeButt( objId );

    return;
}

function moff( objId )
{
    var container = document.getElementById( 'container' );
    var temp = document.getElementById( 'temp' );

    removeMOImage( );
    changeButt( objId );

    return;
}

function createMOImage( objId )
{
    var img = document.createElement('img');
    var leftOffset = document.getElementById( objId ).offsetLeft;

    img.src = 'images/pre-butt-mo.png'; // change image names to match button ID's
    img.style.position = 'absolute';
    img.style.left = leftOffset + "px";
    img.style.opacity = '0.2';
    img.style.zindex = '9';
    img.id = 'temp';
    img.onmouseout = function () { moff( objId ); };

    return img;
}

function removeMOImage(  )
{

    // find cross browser approach. General consensus is to use remove child from the parent div reference but there are alot of issues.
    // Also have issue with mouse moving over the element causing the element to be deleted even though the mouse never actually leaves the element.

    // Best Hypothesized solution - move the mouseout event to the MO image
    // Confirmed solution for Chrome and IE but FF will only delete the image after the first MOut, after recreating the element it stays perminantly
    if ( img = document.getElementById('temp') )
    {
        img.parentNode.removeChild( temp );
    } else {
        return;
    }

}

function changeButt( objId )
{
    var img = document.getElementById( objId );
    var imginv = document.getElementById( objId + "inv" );
    var temp = document.getElementById( 'temp' );

    if ( temp != null )
    {
        img.src = "images/blank-butt.png";
        imginv.src = "images/blank-butt-inv.png";
        return;
    } else {
        img.src = "images/" + objId + ".png";
        imginv.src = "images/" + objId + "inv.png";
        return;
    }    
}

The purpose is to create an image over another image and to delete the image when the mouse is removed from the newly created image ( which is larger than the original image ). It would be VERY much appreciated if this can be solved. I really don’t want to use flash.

Another issue is that the opacity attribute doesn’t seem to work in IE. Ill work on that solution solo unless anyone here has any ideas. And if possible, would some one mind testing on safari? don’t have access to a Mac.

*I apologize for the stupid notes, they were meant to help me keep track when I walked away from computer.

[edit] I fixed the opacity issue.
[edit] Resolved the issue by creating an extra variable.

Answer 1

This is a scoping issue. You define the temp variable in one function and try to refer to it in another function.

function moff( objId ) {
    var container = document.getElementById( 'container' );


    removeMOImage( );
    changeButt( objId );
}


function removeMOImage(  ) {
    var temp = document.getElementById( 'temp' );

    if ( temp ) {
        temp.parentNode.removeChild( temp );
    }
}

You also don’t need the return statements at the end. If you don’t quit early or return a value, you are imitating what the interpreter does for you anyway.