Geek asks and answers

"Undefined" JavaScript error in Firefox

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

Among other things, I call two functions to hide and show the Quicktime user controller, putting a mask on top of it (I know that the switch will be a more elegant solution, but I could not get such a function to work the way I wanted to). Anyway, this is what Javascript looks like:

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

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

I call these functions with various mouse events applied to different divs, for example:

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

Firefox tells me

 "Error: controlsCover is not defined",

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

. , - , Javascript. .

+5
4

controlsCover, .

document.getElementById("controlsCover"), HTML, .

console.log, , .

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

document.getElementById controlsCover:

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

:

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

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

Try the following:

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

Try the following:

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

More articles:


All Articles