Improving manageCover code

JavaScript
5

Here’s the addClickToButtons function

  function addClickToButtons() {
    for (let i = 0; i < allPlayButtons.length; i++) {
      allPlayButtons[i].addEventListener("click", coverClickHandler);
    }
  }

After using forEach it becomes this instead:

  function addClickToButtons() {
    allPlayButtons.forEach(function addEventHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

Here’s the coverClickHandler function

  function coverClickHandler(evt) {
    const cover = evt.currentTarget.parentElement;
    for (let i = 0; i < allContainers.length; i++) {
      allContainers[i].classList.add("hide");
    }
    cover.classList.add("active");
    cover.classList.remove("hide");
  }

And here it improved by using forEach

  function coverClickHandler(evt) {
    allContainers.forEach(function hideContainer(container) {
      container.classList.add("hide");
    });
    const cover = evt.currentTarget.parentElement;
    cover.classList.add("active");
    cover.classList.remove("hide");
  }