Changing background color by clicking a button
Question
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.
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 answers
solution1
1 ACCPTED 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: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.Simply remove the parenthesis:
btnLeft.addEventListener("click", changeTheBg);- You've misspelled
getElementById(), it's notgetElementsById(). .getElementsByClassName()returns a collection of elements, not a single one, so trying to call.addEventListener()on the collection will fail. Instead use.querySelector(), which returns the first element that matches the CSS selector passed to it, as in:let btnLeft = document.querySelector(".left"); let btnRight = document.querySelector(".right");-
pinksis not a valid color.
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>
solution2
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!)-
getElementsByIdis a typo and should begetElementById(singular), as you only select a single element via an 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"
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.