javascript - 事件监听器不工作?

标签 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>

最佳答案

如果您尝试监听事件点击,那么您需要这样的东西:

 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() 获取按钮的 DOM 元素
  2. 使用 addEventListener() 这是添加事件处理程序的标准方法
  3. 更改为单击事件,即单击按钮时创建的事件
  4. 仅将事件处理程序的引用作为 BGcolor 传递,不带括号。您立即调用它,而不是传递对稍后可以调用的函数的引用。

此外,BGcolor() 函数中还需要修复一些问题:

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

这是一个工作版本:

<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/

关于javascript - 事件监听器不工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22238722/

相关文章:

javascript - 如何在 Angular 8 上选择下拉菜单中获取颜色?

javascript - 我正在尝试调用 JavaScript 函数,但无法访问它,因为显然它是 'undefined'

javascript - 在 Javascript 中删除事件监听器表单元素无需克隆元素并且不知道 removeEventListener() 的第二个参数

javascript - 如何并行运行生成器函数?

javascript - RxJS:延迟传入的 observables

javascript - 如何在 Bootsrap3 非真实链接 (<a href ="#..."/>) 上禁用链接 (<a>) 上的 Javascript 操作?

javascript - 如何在 ReactJS 的父组件上设置事件监听器?

javascript - Jquery 触发了太多的 ajax 请求

javascript - 如何防止 DOM 子级继承 addEventListener?

JavaScript - 如何根据此函数的结构删除事件监听器?