Song Playlist - On end of Song move active class to next song in the list

Question

Writing a webapp that will make the active song display the color red

HTML

JAVASCRIPT

// Define variables let song_list = document.getElementsByClassName('songList'); let activeSong = song_list.querySelector('.active'); activeSong.style.cssText = 'color: red';

function selectActiveSong() { // loop to next song in the player for (var i = 0; i < activeSong.length; ) { activeSong[i].classList.remove('active'); activeSong[i].style.cssText = 'color: white'; i++ } // Add active to next song in the player activeSong[i].classList.add('active'); activeSong[i].style.cssText = 'color: red';

}

selectActiveSong();

Answer 1 · 2021-01-21T06:53:02Z

January 21, 2021 6:53am

After hours of research and yelling at the console - had to use JQuery...... Not sure if there is a better way of doing the code but this works

JSfile

  // Define variables
  let activeSong = document.getElementById("active");
  activeSong.style.cssText = 'color: red';
  let getSongList = document.querySelector("p");

// Declare function which gets the active song
function selectActiveSong() {

  // remove current active song
  $("#active").removeAttr("id style");     
  // loop to next song in the playerlist
  getSongList = getSongList.nextElementSibling;
  // Add active id to next song
  getSongList.setAttribute("id", "active");
  // Set active song in playlist to color red
  getSongList.style.cssText = 'color: red';  

}

Welcome to the Treehouse Community

Looking to learn something new?

Craig Kempster

Craig Kempster

Song Playlist - On end of Song move active class to next song in the list

1 Answer

Craig Kempster

Craig Kempster