很抱歉问了这么多问题,但我不擅长 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
,因此不清楚您想要在那里做什么。
按顺序,我改变的事情:
- 使用
document.getElementById()
获取按钮的 DOM 元素 - 使用
addEventListener()
这是添加事件处理程序的标准方法 - 更改为单击事件,即单击按钮时创建的事件
- 仅将事件处理程序的引用作为
BGcolor
传递,不带括号。您立即调用它,而不是传递对稍后可以调用的函数的引用。
此外,BGcolor()
函数中还需要修复一些问题:
- 记住从一个函数调用到下一个函数调用的状态的变量必须在该函数外部声明。
- 颜色值是一个字符串,因此您可以使用
“white”
,而不是white
。 - 要仅更改背景颜色,最好使用
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>
关于javascript - 事件监听器不工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22238722/