事件监听器不工作？ [英] Event listener not working?
问题描述
很抱歉这么多问题，但我很痴迷javascript而且想要擅长这个问题。当我按下一个按钮作为我的另一个概念证明时，我试图让页面改变颜色，但它不起作用，我不完全确定为什么......
Sorry for so many questions, but I suck at javascript and want to get good at it. I'm trying to make a page change colors when you press a button as another proof of concept for me, but it's not working and I'm not entirely sure why...
<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，修正了一下，这就是我现在所拥有的：
k, fixed a little, here's what I have now:
<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>
推荐答案
如果您正在尝试收听活动，请点击，那么你需要这样的东西：
If you're trying to listen for an event click, then you need something like this:
document.getElementById("BGchange").addEventListener("click", BGcolor);
然后，您需要修复此功能中的一些内容：
Then, you need to fix some things in this function:
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 在它被初始化之前所以不清楚你想在那里做什么。
Because you are trying to reference BG2 before it has been initialized so it is not clear what you want to be doing there.
按顺序，我改变的事情：
In order, the things I changed:
- 使用
获取按钮的DOM元素document.getElementById（） - 使用
addEventListener（）这是添加事件处理程序的标准方法 - 更改为单击单击按钮时创建的事件
- 仅将对事件处理程序的引用传递为
BGcolor而不显示parens。你是立即调用它而不是传递对稍后可以调用的函数的引用。
- Get the DOM element for the button with
document.getElementById() - Use
addEventListener()which is the standard way of adding event handlers - Change to the click event which is what buttons create when you click on them
- Pass just a reference to the event handler as
BGcolorwithout the parens. You were calling it immediately rather than passing a reference to the function that can be called later.
此外，还有很多东西要做修复你的 BGcolor（）函数：
In addition, a bunch of things to fix in your BGcolor() function:
- 记住他们的状态的变量函数调用next必须在该函数之外声明。
- 颜色值是一个字符串，所以你要使用
white，不是白色。 - 要更改背景颜色，最好使用
backgroundColorproperty。
- Variables that remember their state from one function call to the next must be declared outside that function.
- A color value is a string so you would use
"white", notwhite. - To change just the background color, it's best to use the
backgroundColorproperty.
这是一个工作版本：
<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/
这篇关于事件监听器不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
