事件监听器不工作?

时间:2014-03-06 23:55:52

标签: javascript addeventlistener

很抱歉这么多问题,但我很痴迷javascript而且想要擅长这个问题。当我按下一个按钮作为我的另一个概念证明时,我正试图让页面改变颜色,但它不起作用,我不完全确定为什么......

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
button.eventlistener(BGchange, BGcolor());
function BGcolor (){
var BG = BG2+1
var BG2 = BG
if(BG==0){
    document.body.style.background = white;
}
else
    if(BG==1){
        document.body.style.background = black;
    }
}
</script>
</body>
</html>

k,修正了一下,这就是我现在所拥有的:

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
BGchange.addEventListener("click", BGcolor);
var BG++
function BGcolor (){
if(BG==0){
backgroundcolor = "white";
}
else
    if(BG==1){
    backgroundcolor = "black";
    }
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

如果您正在尝试收听活动点击,那么您需要这样的内容:

 document.getElementById("BGchange").addEventListener("click", BGcolor);

然后,您需要修复此功能中的一些内容:

function BGcolor (){
    var BG = BG2+1
    var BG2 = BG
    if(BG==0){
        document.body.style.background = white;
    } else if (BG==1) {
        document.body.style.background = black;
    }
}

因为您在初始化之前尝试引用BG2,所以不清楚您想要在那里做什么。

按顺序,我改变了一些事情:

  1. 使用document.getElementById()
  2. 获取按钮的DOM元素
  3. 使用addEventListener()这是添加事件处理程序的标准方法
  4. 更改单击事件,即单击按钮时创建的按钮
  5. 仅将对事件处理程序的引用传递为BGcolor而不包含parens。您是立即调用它而不是传递对稍后可以调用的函数的引用。
  6. 此外,还需要在BGcolor()函数中修复一些内容:

    1. 记住从一个函数调用到下一个函数的状态的变量必须在该函数之外声明。
    2. 颜色值是一个字符串,因此您可以使用"white",而不是white
    3. 要仅更改背景颜色,最好使用backgroundColor属性。
    4. 这是一个有效的版本:

      <button Id="BGchange">BUTTON!</button>
      <script type="text/javascript">
      document.getElementById("BGchange").addEventListener("click", BGcolor);
      
      var curColor = "white";
      function BGcolor (){
          if (curColor == "white") {
              curColor = "black";
          } else {
              curColor = "white";
          }
          document.body.style.backgroundColor = curColor;
      }
      </script>
      

      工作演示:http://jsfiddle.net/jfriend00/Nk2N5/