CODEWITHSUNDEEP
javascriptfirefox
Nick Simpson-Deeks
Nick Simpson-Deeks

Reputation: 73

"Not defined" javascript error in Firefox

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.

Upvotes: 5

Views: 3319

Answers (4)

Glycerine
Glycerine

Reputation: 7347

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

Upvotes: 6

William Troup
William Troup

Reputation: 13131

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

Upvotes: 0

mcacorner
mcacorner

Reputation: 1274

Try this:

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

Upvotes: 0

antyrat
antyrat

Reputation: 27765

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

Upvotes: 2

Related Questions