If I can organize all the 'song(n)' containers && the 'playsong(n)' buttons into 2 arrays, I could put 2 'forEach' method on each array and save hundreds of lines of code. Is this possible in Javascript?

// 12 buttons 
let playsong1 = document.getElementById("playsong-1");
// 12 grid containers
let song1 = document.getElementById("song1");

  playsong1.addEventListener("click", function playSong1() {
     song1.classList.add("song-boxes-active"); song7.classList.remove("song-boxes-active");
     song2.classList.remove("song-boxes-active"); song8.classList.remove("song-boxes-active");
     song3.classList.remove("song-boxes-active"); song9.classList.remove("song-boxes-active");
     song4.classList.remove("song-boxes-active"); song10.classList.remove("song-boxes-active");
     song5.classList.remove("song-boxes-active"); song11.classList.remove("song-boxes-active");
     song6.classList.remove("song-boxes-active"); song12.classList.remove("song-boxes-active");
     playsong1.innerHTML = "<i class = 'fa fa-pause-circle-o'></i>";playsong7.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
     playsong2.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";playsong8.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
     playsong3.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";playsong9.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
     playsong4.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";playsong10.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
     playsong5.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";playsong11.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
     playsong6.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";playsong12.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
  if (playlist_index !== 0) {
   audio.src = dir   playlist[0]   ext; playlist_status.innerHTML = playlist[0];
   playlist_index = 0;
   playPause();
   } else if ((!audio.paused) && playlist_index === 0) {
      playsong1.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
      playPause();
   } else if((audio.paused) && playlist_index === 0) {
     playsong1.innerHTML = "<i class = 'fa fa-pause-circle-o'></i>"; 
     playPause();
      }
  });

CodePudding user response：

Use an array (or NodeList) for the buttons and containers instead, and use the index being iterated over to identify which button and container needs to be toggled. Give each of the buttons and containers a class in common, like play-button and container.

Instead of separate .innerHTML assignments to each button and container, it looks like you actually only need to change the classes, so do that. classList.toggle can be used to concisely enable or disable a class name. The optional second argument can be used to indicate whether the class should be added or removed.

Because all code paths end in playPause being called, there's no need to put that inside the conditional - call it unconditionally afterwards instead.

const buttons = document.querySelectorAll('.play-button');
const containers = document.querySelectorAll('.container');
buttons.forEach((button, i) => {
    button.addEventListener('click', () => {
        containers.forEach((container, j) => {
            container.classList.toggle('song-boxes-active', i === j);
        });
        buttons.forEach((button, j) => {
            button.children[0].classList.toggle('fa-pause-circle-o', i === j);
            button.children[0].classList.toggle('fa-play-circle-o', i === j);
        });
        if (playlist_index !== 0) {
            audio.src = dir   playlist[i]   ext;
            playlist_status.innerHTML = playlist[i];
            playlist_index = 0;
        } else {
            button.innerHTML = `<i class = 'fa fa-${audio.paused ? 'pause' : 'play'}-circle-o'></i>`;
        }
        playPause();
    });
});