Error de Javascript "no definido" en Firefox

Question

Soy muy nuevo en JS, y entiendo que mi script es probablemente terrible, pero todo funciona bien en Safari y Chrome, pero no en Firefox.

Entre otras cosas, estoy llamando a dos funciones para ocultar y revelar un controlador de película Quicktime personalizado colocando una "máscara" sobre la parte superior (sé que un alternar sería una solución más elegante, pero no pude t obtener esa función para que funcione de la manera que yo quería). De todos modos, esto es lo que ve el Javascript como:

function revealControls(){ 
     document.getElementById("controlsCover"); 
     controlsCover.style.display ="none" 
} 

function hideControls(){ 
     document.getElementById("controlsCover"); 
     controlsCover.style.display ="block" 
} 

Voy a llamar a estas funciones con diferentes eventos de ratón aplicados a varios divs, tales como:

<div id = "controls" onmouseout = "hideControls()"> 

Firefox me está diciendo

"Error: controlsCover is not defined", 

y no tengo idea de cómo definir el elemento como nulo.

Cualquier ayuda sería apreciada. Estoy seguro de que es algo muy simple, pero prácticamente no tengo experiencia con Javascript. Todavía.

Answer 1

Primero debe crear la variable controlsCover para referenciarla.

Cuando use por primera vez document.getElementById("controlsCover"), esto devolverá un elemento HTML que pasará a una variable para usar.

Si elimina el comentario de console.log, verá lo que hay dentro de la variable.

function revealControls()  
{ 
    var controlsCover = document.getElementById("controlsCover"); 
    /* console.log(controlsCover) */ 
    controlsCover.style.display ="none" 
} 

function hideControls() 
{ 
    var controlsCover = document.getElementById("controlsCover"); 
    controlsCover.style.display ="block" 
} 

Answer 2

necesita asignar valor document.getElementById retorno a controlsCover variables:

var controlsCover = document.getElementById("controlsCover"); 

fijo será:

function revealControls() { 
    var controlsCover = document.getElementById("controlsCover"); 
    controlsCover.style.display ="none" 
} 

function hideControls() { 
    var controlsCover = document.getElementById("controlsCover"); 
    controlsCover.style.display ="block" 
} 

Answer 3

Prueba esto:

var ele =document.getElementById("controlsCover"); 
ele.style.display = "none"; 

Answer 4

Prueba esto:

function revealControls()  
{ 
    var oControlsCover = document.getElementById("controlsCover"); 

    if (oControlsCover) { 
    oControlsCover.style.display ="none"; 
    } 
} 

function hideControls() 
{ 
    var oControlsCover = document.getElementById("controlsCover"); 

    if (oControlsCover) { 
    oControlsCover.style.display ="block"; 
    } 
}