移除Firefox中元素的問題

Question

我使用JavaScript來創建和移除網頁中的元素。我已經在除Firefox以外的每個瀏覽器中都能正常工作。在Firefox中，它會創建元素，移除元素，重新創建元素，但是在重新創建元素之後，它會返回一個「未找到」類型的錯誤，表明該元素不存在，並且主要在屏幕上卡住點。

這會創建影像：

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; 
} 

正如你所看到的，所創建的圖像被賦予了鼠標離開事件調用此函數：

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

    removeMOImage(); 
    changeButt(objId); 

    return; 
} 

改變功能工作完全正常，但它不是因爲JavaScript被終止在removeMOImage()函數中而被調用：

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

removeChild函數返回未找到，儘管元素已成功地在create函數中重新創建。

我在IE Chrome Opera和Firefox中測試過，唯一有問題的是Firefox。還有一些我必須克服的其他FF特定問題，其中大部分都是從其他堆棧溢出線程解決的;但是，我找不到解決此問題的方法。

這是完整的JavaScriptÇ& p從源：

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; 
    }  
} 

目的是對另一圖像創建的圖像，並刪除的圖像當鼠標從新創建的圖像中去除（其比原始圖像大）。如果能夠解決這個問題，將非常感激。我真的不想使用閃光燈。

另一個問題是，不透明屬性在IE中似乎不起作用。除非任何人在這裏有任何想法，否則生病的解決方案是獨奏的。如果可能的話，有人會考慮在safari上進行測試嗎？無法訪問Mac。

*我爲這些愚蠢的音符道歉，他們的目的是幫助我保持跟蹤，當我離開電腦。

我修復了不透明問題。 [編輯]通過創建一個額外的變量解決了這個問題。

Answer 1

這是一個範圍界定問題。您可以在一個函數中定義temp變量，並嘗試在另一個函數中引用它。

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


    removeMOImage(); 
    changeButt(objId); 
} 


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

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

您最後也不需要return聲明。如果你沒有提前退出或回報價值，那麼你就是在模仿口譯員爲你做的事情。