Make a button/class change it's own color

Question

I'm. I just began learning HTML and CSS. My question is: How do I make the buttons above change color once they're clicked:

I've tried adding an onclick event, but it didn't work. This is the function:

The full code:

user_383904 · Answer

Don't use inline JavaScript on*="" handlers, same as you hopefully don't use inline style="" attributes. JavaScript should be in one place only and that's your script tag or file.
Use Element.addEventListener()
Use .querySelectorAll() to get your desired elements
Use NodeList.prototype.forEach() to loop your elements
Use Element.classList with the API methods .add() .remove() etc.
Use higher specificity in your CSS by doing .icon-bar a.active to override the :hover styles.

const ELS_barItems = document.querySelectorAll(".icon-bar a");

function makeActive(ev) {
  ev.preventDefault(); // prevent browser action on Anchors
  ELS_barItems.forEach(el => el.classList.remove("active"));
  ev.currentTarget.classList.add("active");
}

ELS_barItems.forEach(el => el.addEventListener("click", makeActive));

body {margin:0}

.icon-bar {
    margin-top: 20%;
    margin-left: 0.2%;
    width: 90px;
    background-color: rgba(85, 85, 85, 0.85);;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.icon-bar a:hover {
  background-color: rgba(0, 140, 255, 0.5);
}

.icon-bar a.active {
  background-color: rgba(0, 140, 255, 1);
}

user_10064158 · Answer

You can just pass the element reference to your function:

and your Javascript:

turnRed = function(e){
  e.style.background = 'red'
}

As for your code, the problem is that you are calling getElementById("fa fa-search") but you're passing a class instead. You could change to getElementsByClassName but remember that every element with that class would change as well.

Make a button/class change it's own color

2 Answers