Firefox中的"未定义"javascript错误

Question

我对JS很新,并且明白我的脚本可能很糟糕,但它在Safari和Chrome中运行良好,而不是在Firefox中.

除此之外,我正在调用两个函数来隐藏和显示一个自定义的Quicktime电影控制器,在它的顶部放置一个"面具"(我知道切换将是一个更优雅的解决方案,但我无法得到这样的功能以我想要的方式工作).无论如何,这就是Javascript的样子:

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

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

我用不同的鼠标事件调用这些函数应用于各种div,例如:

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

Firefox告诉我

 "Error: controlsCover is not defined", 

我不知道如何将元素定义为null.

任何帮助,将不胜感激.我确信这很简单 - 但我几乎没有使用Javascript的经验.然而.

Answer 1

您需要先创建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"
}