You need to make only one active button from the collection - Html

AndreiParshukov
March 23, 2023
253 views
2 votes
4 Answers

In general, I have 3 blocks with buttons. When you click on the button, the picture is replaced by another one. But it is necessary to make sure that when the next track is activated, the previous button returns to its original state.

let btn = document.querySelectorAll('.btn-wrapper');

btn.forEach(function(element) {
  element.addEventListener('click', function(e) {

    element.querySelector('.play__btn').classList.toggle('play__btn-hidden');
    element.querySelector('.pause__btn').classList.toggle('pause__btn-active');

  })
})

.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}

<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
</div>

Answers

You can do something like this:

function reset() {

 document.querySelectorAll('.play__btn').forEach(function (element) {
element.classList.remove('play__btn-hidden');
});

document.querySelectorAll('.pause__btn').forEach(function (element){
element.classList.remove('pause__btn-active');
});
}

let btn = document.querySelectorAll('.btn-wrapper');

btn.forEach(function(element) {
  element.addEventListener('click', function(e) {

    reset();
element.querySelector('.play__btn').classList.toggle('play__btn-hidden');
    element.querySelector('.pause__btn').classList.toggle('pause__btn-active');

  })
})

.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}

<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
</div>

Here is a slightly different way to handle it:

let btn = document.querySelectorAll('.btn');
btn.forEach(function(element) {
  element.addEventListener('click', function(e) {
    btn.forEach((el) => el != e.target && el.classList.remove('btn--pause'));
    e.target.classList.toggle('btn--pause');
  })
})

.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
  background-size: 17px 17px;
}

.btn--play {
  background-image: url("https://cdn-icons-png.flaticon.com/512/153/153752.png");
}

.btn--pause {
  background-image: url("https://cdn-icons-png.flaticon.com/512/1214/1214679.png");
}

<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn btn--play"></div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn btn--play"></div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn btn--play"></div>
  </div>
</div>

I simplified your code version. There is no need to switch classes on both elements if u want to change only visibility.

Just filter the buttons collection for the active and remove it.

let btn = document.querySelectorAll('.btn-wrapper');
const activeClass = 'active'

btn.forEach(function(element) {
  element.addEventListener('click', function(e) {
    element.classList.toggle(activeClass)
    const activeBtns = Array.from(btn).filter(el => el != element && el.classList.contains(activeClass))
    if (activeBtns.length) {
      activeBtns.forEach(el => {
            el.classList.remove(activeClass)
      })
    }
 })
})

.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.btn-wrapper .play__btn {
  display: block;
}

.btn-wrapper .pause__btn {
  display: none;
}

.btn-wrapper.active .play__btn {
  display: none;
}

.btn-wrapper.active .pause__btn {
  display: block;
}

<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn">
    </div>
  </div>
</div>

I modified your script a bit:

const btns = document.querySelectorAll(".btn-wrapper");

const resetAllBtns = () => {
  btns.forEach((btn) => {
    // reset all
    btn.querySelector(".play__btn").classList.remove("play__btn-hidden");
    btn.querySelector(".pause__btn").classList.remove("pause__btn-active");
  });
};

const togglePlayStatus = (classList, btnWrapper) => {
  // toggle the state of btn being clicked
  if (classList.contains("play__btn")) {
    classList.add("play__btn-hidden");

    btnWrapper.querySelector(".pause__btn").classList.add("pause__btn-active");
  } else {
    classList.remove("pause__btn-active");
    btnWrapper.querySelector(".play__btn").classList.remove("play__btn-hidden");
  }
};

const onClick = (e) => {
  const btnWrapper = e.target.parentElement;
  const classList = e.target.classList;

  resetAllBtns();
  togglePlayStatus(classList, btnWrapper);
};

btns.forEach(function(element) {
  element.addEventListener("click", (e) => onClick(e));
});

.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}

<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn" />
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn" />
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn" />
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn" />
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="" class="play__btn btn" />
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="" class="pause__btn btn" />
    </div>
  </div>
</div>

What’s happening is:

We reset ALL buttons to the original play state.
Once all buttons are reset, we toggle the state of the button being clicked. To do this, we use e.target.parentElement to target the btn-wrapper and then target the buttons inside the wrapper. Then we add/remove the appropriate classes.

I hope this helps!

Please signup or login to give your own answer.

Click here to cancel reply.

You need to make only one active button from the collection – Html

Answers