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>

You have at least three different problems here, all of which are duplicates. — Quentin, Dec 22 '19 at 19:19
Problem 1: https://stackoverflow.com/questions/7885639/javascript-error-document-getelementsbyid-is-not-a-function — Quentin, Dec 22 '19 at 19:19
Problem 2: https://stackoverflow.com/questions/2485244/window-onload-seems-to-trigger-before-the-dom-is-loaded-javascript — Quentin, Dec 22 '19 at 19:20
Problem 3: https://stackoverflow.com/questions/2485244/window-onload-seems-to-trigger-before-the-dom-is-loaded-javascript — Quentin, Dec 22 '19 at 19:20
Your 4th problem is that you don't seem to have looked at the error Console in your browser's developer tools. — Quentin, Dec 22 '19 at 19:20

Scott Marcus · Accepted Answer · 2019-12-22T19:28:08.340

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 changeTheBg function 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 not getElementsById().
.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");
```
pinks is 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>

That only covers -one- two of the many problems with the code. It was already mentioned in a duplicate before you reopened the question. — Quentin, Dec 22 '19 at 19:21
@Quentin I addressed the first error I saw and posted, then was in the process of updating the answer when I spotted others. All errors have been identified now. — Scott Marcus, Dec 22 '19 at 19:31
Thanks Everyone. It's my first day trying to get with js again, sorry for the uncareful errors! — Roland, Dec 22 '19 at 19:37

Constantin Groß · Answer 2 · 2019-12-22T19:43:20.417

getElementsByClassName returns a live NodeList, use querySelector(".classname") instead (see Scott's comment and link for why not to use the NodeList!)
getElementsById is a typo and should be getElementById (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>

`getElementsByClassName returns a NodeList, from which you have to select e.g. the first item via index 0` <--- [**No, no, no!!**](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) — Scott Marcus, Dec 22 '19 at 19:35

Changing background color by clicking a button

2 Answers2