"Not defined" javascript error in Firefox

Question

I'm very new to JS, and understand that my script is probably terrible, but it all works fine in Safari and Chrome, just not in Firefox.

Amongst other things, I'm calling two functions to hide and reveal a custom Quicktime movie controller by placing a "mask" over the top of it (I know a toggle would be a more elegant solution, but I couldn't get such a function to work the way I wanted). Anyway, this is what the Javascript looks like:

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

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

I'm calling these functions with different mouse events applied to various divs, such as:

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

Firefox is telling me

 "Error: controlsCover is not defined", 

and I have no idea how to define the element as null.

Any help would be appreciated. I'm sure it's something very simple — but I have virtually no experience with Javascript. Yet.

Answer 1

You need to create the controlsCover variable first to reference it.

When you first use document.getElementById("controlsCover"), this will return a HTML element of which you pass to a variable to use.

If you uncomment the console.log - you'll see what is inside the 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

You need to assign document.getElementById return value to controlsCover variable:

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

Fixed will be:

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

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