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.

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.

• javascript
• firefox

• how the heck would this work under safari or chrome..... – Sebas Commented Jun 22, 2012 at 12:29
• 2 chat.stackoverflow./rooms/17/conversation/… chat.stackoverflow./rooms/17/conversation/… stackoverflow./tags/javascript/info all great places to start learning and picking up resources . STAY AWAY FROM W3SCHOOLS!!!!! MDN is your new friend. – rlemon Commented Jun 22, 2012 at 12:43

4 Answers 4

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 unment 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"
}

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

Try this:

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

Try this:

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