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

Share Improve this question Follow edited Jun 22, 2012 at 13:05 Sanath 4,8841111 gold badges5757 silver badges8787 bronze badges asked Jun 22, 2012 at 12:20 Nick Simpson-DeeksNick Simpson-Deeks 7311 silver badge77 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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