Si puedo organizar todos los contenedores 'song(n)' && los botones 'playsong(n)' en 2 matrices, podría poner 2 métodos 'forEach' en cada matriz y ahorrar cientos de líneas de código. ¿Es esto posible en 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(); } });Use una matriz (o NodeList) para los botones y contenedores en su lugar, y use el índice que se está iterando para identificar qué botón y contenedor necesita alternarse. Asigne a cada uno de los botones y contenedores una clase en común, como play-button y container .
En lugar de asignaciones .innerHTML separadas para cada botón y contenedor, parece que en realidad solo necesita cambiar las clases, así que hágalo. classList.toggle se puede usar para habilitar o deshabilitar de manera concisa un nombre de clase. El segundo argumento opcional se puede usar para indicar si la clase debe agregarse o eliminarse.
Debido a que todas las rutas de código terminan cuando se llama a playPause , no hay necesidad de poner eso dentro del condicional; en su lugar, llámelo incondicionalmente después.
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(); }); });