通过单击按钮更改背景颜色
[英]Changing background color by clicking a button
问题描述
I am learning JS and am trying to simply change the background color of a div when clicking on a button and wonder why my code isn't working.
我正在学习 JS 并试图在单击按钮时简单地更改 div 的背景颜色，并想知道为什么我的代码不起作用。
Maybe somebody can take a quick look at the code below:也许有人可以快速浏览一下下面的代码：
let btnLeft = document.getElementsByClassName("left"); let btnRight = document.getElementsByClassName("right"); let ad = document.getElementById("ad"); btnLeft.addEventListener("click", changeTheBg()); btnRight.addEventListener("click", changeTheBg2()); function changeTheBg(){ ad.style.backgroundColor = "green"; }; function changeTheBg2(){ ad.style.backgroundColor = "pink"; };
#ad { width: 400px; max-width: 500px; height:200px; background-color: red; border-radius: 20px; }
<html> <head> <link rel="stylesheet" type="text/css" href="/style.css"> </head> <body> <div id="ad"></div> <div id="controls"> <button class="left">Left </button> <button class="right">Right </button> </div> <script src="script.js"></script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2019-12-22 19:20:30
You have several problems:你有几个问题：
.addEventListener()takes a function "reference" as the second argument, you've passed a function "invocation" because you've added parenthesis after the function name:.addEventListener()将函数“引用”作为第二个参数，您传递了一个函数“调用”，因为您在函数名称后添加了括号：btnLeft.addEventListener("click", changeTheBg());As a result, your
changeTheBgfunction is being invoked immediately and the return value from that function (nothing in this case) winds up being the reference for the callback.因此，您的changeTheBg函数会立即被调用，并且该函数的返回值（在本例中没有任何内容）最终成为回调的引用。Simply remove the parenthesis:
只需删除括号：btnLeft.addEventListener("click", changeTheBg);- You've misspelled
getElementById(), it's notgetElementsById().你拼错了getElementById()，它不是getElementsById()。 .getElementsByClassName()returns a collection of elements, not a single one, so trying to call.addEventListener()on the collection will fail..getElementsByClassName()返回元素集合，而不是单个元素，因此尝试在集合上调用.addEventListener()将失败。 Instead use.querySelector(), which returns the first element that matches the CSS selector passed to it, as in:而是使用.querySelector()，它返回与传递给它的 CSS 选择器匹配的第一个元素，如下所示：let btnLeft = document.querySelector(".left"); let btnRight = document.querySelector(".right");-
pinksis not a valid color.pinks不是有效颜色。
Here's the working code:这是工作代码：
let btnLeft = document.querySelector(".left"); let btnRight = document.querySelector(".right"); let ad = document.getElementById("ad"); btnLeft.addEventListener("click", changeTheBg); btnRight.addEventListener("click", changeTheBg2); function changeTheBg(){ ad.style.backgroundColor = "green"; }; function changeTheBg2(){ ad.style.backgroundColor = "pink"; };
#ad { width: 400px; max-width: 500px; height:200px; background-color: red; border-radius: 20px; }
<div id="ad"></div> <div id="controls"> <button class="left">Left </button> <button class="right">Right </button> </div>
解决方案2
1 2019-12-22 19:21:43
getElementsByClassNamereturns a liveNodeList, usequerySelector(".classname")instead (see Scott's comment and link for why not to use the NodeList!)getElementsByClassName返回一个实时NodeList，使用querySelector(".classname")代替（请参阅 Scott 的评论和链接，了解为什么不使用 NodeList！）-
getElementsByIdis a typo and should begetElementById(singular), as you only select a single element via an idgetElementsById是一个错字，应该是getElementById（单数），因为您只能通过 id 选择一个元素 - you have to bind to the handler function name reference, not execute it via
()您必须绑定到处理程序函数名称引用，而不是通过()执行它 - "pinks" is another typo and not a valid colour name, it should be "pink" “pinks”是另一个错字，不是有效的颜色名称，应该是“pink”
let btnLeft = document.querySelector(".left"); let btnRight = document.querySelector(".right"); let ad = document.getElementById("ad"); btnLeft.addEventListener("click", changeTheBg); btnRight.addEventListener("click", changeTheBg2); function changeTheBg() { ad.style.backgroundColor = "green"; }; function changeTheBg2() { ad.style.backgroundColor = "pink"; };
#ad { width: 400px; max-width: 500px; height: 200px; background-color: red; border-radius: 20px; }
<div id="ad"></div> <div id="controls"> <button class="left">Left </button> <button class="right">Right </button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.