CODEWITHSUNDEEP
javascripthtmlcss
Ludar0
Ludar0

Reputation: 85

Changing button class with javascript is not working

I have three button. Each of them change backgroud of banner section. I want to set active class on them when clicked. I was trying to take array of buttons and iterate through them but something is not working. Could you tell me what am I doing wrong?

Here is the code:

const banner = document.getElementById('carousel');
const btns = banner.getElementsByClassName('button');
for (const i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
        const current = document.getElementsByClassName('active');
        current[0].className = current[0].className.replace('active', '');
        this.className += 'active';
    })
};
.carousel {
  top: 50%;
  position: absolute;
}

.carousel .button {
  height: 10px;
  width: 10px;
  border: 2px solid black;
  margin: 10px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}

.carousel .button .active {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  height: 4px;
  width: 4px;
  border-radius: 5px;
  background: #fea100;
}
<div class="carousel" id="carousel">
    <div class="button" id="button1">
        <div class="active"></div>
    </div>
    <div class="button" id="button2">
        <div></div>
    </div>
    <div class="button" id="button3">
        <div></div>
    </div>
</div>

Upvotes: 0

Views: 200

Answers (1)

Mamun
Mamun

Reputation: 68933

The keyword this is referring the clicked button. You should target the div inside this. You can use remove() and add() to remove/add class to the elements:

Try the following way:

let banner = document.getElementById('carousel');
let btns = banner.getElementsByClassName('button');
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    let current = document.getElementsByClassName('active');
    current[0].className = current[0].classList.remove('active');
    this.querySelector('div').classList.add('active');
  })
}
.carousel {
  top: 50%;
  position: absolute;
}

.carousel .button {
  height: 10px;
  width: 10px;
  border: 2px solid black;
  margin: 10px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}

.carousel .button .active {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  height: 4px;
  width: 4px;
  border-radius: 5px;
  background: #fea100;
}
<div class="carousel" id="carousel">
  <div class="button" id="button1">
      <div class="active"></div>
  </div>
  <div class="button" id="button2">
      <div></div>
  </div>
  <div class="button" id="button3">
      <div></div>
  </div>
</div>

You can also use querySelectorAll() and forEach() like the following way:

let btns = document.querySelectorAll('.button');
let divs = document.querySelectorAll('.button > div');
btns.forEach(function(btn){
  btn.addEventListener('click', function() {
    document.querySelector('.active').classList.remove('active');
    this.firstElementChild.classList.add('active');
  });
})
.carousel {
  top: 50%;
  position: absolute;
}

.carousel .button {
  height: 10px;
  width: 10px;
  border: 2px solid black;
  margin: 10px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}

.carousel .button .active {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  height: 4px;
  width: 4px;
  border-radius: 5px;
  background: #fea100;
}
<div class="carousel" id="carousel">
  <div class="button" id="button1">
      <div class="active"></div>
  </div>
  <div class="button" id="button2">
      <div></div>
  </div>
  <div class="button" id="button3">
      <div></div>
  </div>
</div>

Upvotes: 1

Related Questions