问题描述
很抱歉这么多问题,但我很痴迷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
BGcolor
without 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
,不是白色
。 - 要更改背景颜色,最好使用
backgroundColor
property。
- 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
backgroundColor
property.
这是一个工作版本:
<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>
工作演示:
这篇关于事件监听器不工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!