CODEWITHSUNDEEP
javascripthtmlcss
Nils1801
Nils1801

Reputation: 39

How to add a active class that stays activated

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>

Upvotes: 1

Views: 65

Answers (3)

Mwangi Njuguna
Mwangi Njuguna

Reputation: 75

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

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 3

aghidini
aghidini

Reputation: 3010

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">.

Upvotes: 3

Related Questions