How to change backgorundColor element onclick in javascript?

Question

I'm new to JavaScript. I wanna change the color of menu button when I click on it and change the color back when I click it second time. I wrote a simple code in JS, but it does nothing.

document.getElementById("menuBtn div").onclick = changeColor;

function changeColor() {
  if (changeColor.style.backgroundColor === "#EF6A6A") {
    changeColor.style.backgroundColor = "#fff"
  } else {
    changeColor.style.backgroundColor = '#EF6A6A'
  }
}

changeColor()

#menuBtn {
  position: fixed;
  display: block;
  cursor: pointer;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

#menuBtn div {
  width: 38px;
  height: 5px;
  background-color: #EF6A6A;
  margin: 8px;
  border-radius: 2100px;
  transition: all 0.3s ease;
}

<div id="menuBtn">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

Your selector is wrong `menuBtn div`. Are you wanting to change the colour of the children or the parent? — Pete, Mar 26 '21 at 13:14
There are many error in code, JS can't search element with `menuBtn div"`. This is not an id. It should be `menuBtn` — DecPK, Mar 26 '21 at 13:15
@Pete The selector is wrong in either case because OP uses `.getElementById()` and not `.querySelector()`/`.querySelectorAll()` — Andreas, Mar 26 '21 at 13:15
@Andreas I know, that's why I said the selector is wrong - but depending on what they are trying to do will change the type of answer given - one requires looping through the children and changing the way they get the elements, the other you can just change the selector and fix the function — Pete, Mar 26 '21 at 13:17
A lost of mistakes here. i count 4... `changeColor.style` -- `changeColor` here is also wrong, look at https://javascript.info/event-delegation Also when checking background color you re not getting HEX value, you wil get RGB https://stackoverflow.com/questions/1887104/how-to-get-the-background-color-of-an-html-element So your if statement is also wrong. — ikiK, Mar 26 '21 at 13:18

DecPK · Accepted Answer · 2021-03-26T13:30:51.683

It would be better to create a new css class and toggle with button click. Below would change the backgroundColor of the menuBtn.

const menuBtn = document.getElementById("menuBtn");

menuBtn.addEventListener("click", changeColor);

function changeColor() {
  menuBtn.classList.toggle("bgColorOrange");
}

#menuBtn {
  position: fixed;
  display: block;
  cursor: pointer;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

#menuBtn div {
  width: 38px;
  height: 5px;
  background-color: #EF6A6A;
  margin: 8px;
  border-radius: 2100px;
  transition: all 0.3s ease;
}

.bgColorOrange {
  background-color: #EF6A6A;
}

<div id="menuBtn">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

If you want to add background color white of lines when menuBtn background color is #EF6A6A. You can again create a new class and toggle on click of a button.

const menuBtn = document.getElementById("menuBtn");
const lines = document.querySelectorAll(".line");

menuBtn.addEventListener("click", changeColor);

function changeColor() {
  menuBtn.classList.toggle("bgColorOrange");
  lines.forEach(line => line.classList.toggle("bgColorWhite"));
}

#menuBtn {
  position: fixed;
  display: block;
  cursor: pointer;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

#menuBtn div {
  width: 38px;
  height: 5px;
  background-color: #EF6A6A;
  margin: 8px;
  border-radius: 2100px;
  transition: all 0.3s ease;
}

.bgColorOrange{
  background-color: #EF6A6A;
}

.bgColorWhite{
  background: white !important;
}

<div id="menuBtn">
  <div class="line1 line"></div>
  <div class="line2 line"></div>
  <div class="line3 line"></div>
</div>

rook218 · Answer 2 · 2021-03-26T13:28:41.123

0

The issue is that you are referencing your function changeColor, which doesn't have a property style.backgroundColor. You'll want to make sure you're referencing your DOM element:

const element = document.getElementById("menuBtn")
element.onclick = changeColor;

function changeColor() {
    if (element.style.backgroundColor === rgb(0,0,0)) {
        element.style.backgroundColor = rgb(3,2,1)
    } else {
        element.style.backgroundColor = rgb(0,0,0)
    }
}

I've also fixed your selector tag.

edited Mar 26 '21 at 13:28

answered Mar 26 '21 at 13:25

rook218

644
7
20

1

Also when checking background color you re not getting HEX value, you wil get RGB – ikiK Mar 26 '21 at 13:27

How to change backgorundColor element onclick in javascript?

2 Answers2