How to add a active class that stays activated

Question

Hey there is a relatively strange problem on one part of my website. I included the part that doesn’t work anymore. Normally the button should stay at the same size and should have a dark blue color if it is clicked. But right now, it just gets a basic html button. That’s strange because a few days ago the code worked perfectly fine and I changed nothing.

var header = document.getElementById("flex-wrapper-zahlung");
var btns = header.getElementsByClassName("accordion-zahlung");
for (var y = 0; y < btns.length; y++) {
  btns[y].addEventListener("click", function() {
    var current = document.getElementsByClassName("activated");
    if (current.length > 0) {
      current[0].className = current[0].className.replace("activated", "");
    }
    this.className += "activated";
  });
}

.flex-wrapper-zahlung {
  margin: 0 0 0 0;
  width: 24em;
}

.accordion-zahlung {
  display: flex;
  background-color: #ededed;
  color: black;
  cursor: pointer;
  padding: .75em;
  width: 30em;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1em;
  font-weight: 500;
  transition: 0.4s;
  margin: .5em 0 0 0;
  border-radius: .5em;
}

.activated,
.accordion-zahlung:hover {
  background-color: #092a5e;
  color: white;
}

<div id="flex-wrapper-zahlung">
  <button class="accordion-zahlung"><i class="far fa-credit-card"></i> &nbsp; &nbsp; Kreditkarte</button>
  <button class="accordion-zahlung"> <i class="fas fa-file-invoice"></i> &nbsp; &nbsp; &nbsp; Lastschrift</button>
  <button class="accordion-zahlung"><i class="fab fa-paypal"></i> &nbsp; &nbsp; &nbsp; PayPal</button>
  <button class="accordion-zahlung"><i class="fas fa-money-check"></i> &nbsp; &nbsp; Rechnung</button>

</div>

Your demo seems to work just fine for me. Can you re-clarify what you are expecting the result to be? — Alicia Sykes, May 26 '19 at 14:04
Maybe you are missing a space? `this.className += " activated";` instead of `this.className += "activated";` (mind the space at the beginning of the string) — aghidini, May 26 '19 at 14:05
*"That’s strange because a few days ago the code worked perfectly fine and I changed nothing."* Believing that is just going to get in your way. :-) One half of that sentence or the other is mistaken. Either it didn't work a few days ago, or you did change something. — T.J. Crowder, May 26 '19 at 14:07
@aghidini you are right there is missing a space infront of activated thank you — Nils1801, May 26 '19 at 14:09
Possible duplicate of [How to change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-to-change-an-elements-class-with-javascript) — Mark Schultheiss, May 26 '19 at 14:17

score 3 · Accepted Answer · answered May 26 '19 at 14:10

By looking at your code I think that you are simply missing a space when updating the className: try with this.className += " activated"; instead of this.className += "activated";

With your code the new className of the button would've become <button class="accordion-zahlungactivated">.

score 3 · Answer 2 · answered May 26 '19 at 14:10

In order to add or remove a class you can use classList so that your code changes from:

this.className += "activated";

to:

this.classList.add("activated");

The snippet:

var header = document.getElementById("flex-wrapper-zahlung");
var btns = header.getElementsByClassName("accordion-zahlung");
for (var y = 0; y < btns.length; y++) {
    btns[y].addEventListener("click", function() {
        var current = document.getElementsByClassName("activated");
        if (current.length > 0) {
            current[0].classList.remove('activated')
        }
        this.classList.add("activated");
    });
}

.flex-wrapper-zahlung {
    margin: 0 0 0 0;
    width: 24em;
}

.accordion-zahlung {
    display: flex;
    background-color: #ededed;
    color: black;
    cursor: pointer;
    padding: .75em;
    width: 30em;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
    font-weight: 500;
    transition: 0.4s;
    margin: .5em 0 0 0;
    border-radius: .5em;
}

.activated,
.accordion-zahlung:hover {
    background-color: #092a5e;
    color: white;
}

<div id="flex-wrapper-zahlung">

    <button class="accordion-zahlung"><i class="far fa-credit-card"></i> &nbsp; &nbsp; Kreditkarte</button>

    <button class="accordion-zahlung"> <i class="fas fa-file-invoice"></i> &nbsp; &nbsp; &nbsp; Lastschrift</button>

    <button class="accordion-zahlung"><i class="fab fa-paypal"></i> &nbsp; &nbsp; &nbsp; PayPal</button>

    <button class="accordion-zahlung"><i class="fas fa-money-check"></i> &nbsp; &nbsp; Rechnung</button>

</div>

`classList` is the proper approach methinks also since the method used by the OP replaces all the classes on the element instead of adding and removed the desired one. — Mark Schultheiss, May 26 '19 at 14:16

score 0 · Answer 3 · answered May 26 '19 at 15:04

0

You need to add space to the activated class i.e " activated".

answered May 26 '19 at 15:04

Mwangi Njuguna

75
2
10

How to add a active class that stays activated

3 Answers3