Step 37 music player not passing

JavaScript
1

hi, no help button on this step. and totally blind. using jaws for windows 2025 with windows 11 pro. google chrome latest version. now encountering an issue where i then have to then use the function highlightCurrentSong and the chanining of the function to then play the current song. and it is not passing, have reset the lesson, done hard refresh, and also wrote the function hand code in the editor. so, is it my code? or is it a bug with the fcc? and totally frustrated. tried the latst 24 hours to try to get this to work, facing accessibility challenges. so, using a screen reader. can anyone help me to get this to pass. frustrated. pasting the errors, my html and javascript below.

thank you.

marvin.

ps: pasting below.

html:

const playButton = document.getElementById(“play”);

const allSongs = [
{ id: 0, title: “Song 0”, src: “song0.mp3” },
{ id: 1, title: “Song 1”, src: “song1.mp3” }
];

const audio = new Audio();

const userData = {
songs: allSongs,
currentSong: null
};

// — Step 37 function —
function highlightCurrentSong() {
const previous = document.querySelector(‘.playlist-song[aria-current=“true”]’);
const songToHighlight = document.getElementById(song-${userData.currentSong?.id});
if (previous) previous.removeAttribute(“aria-current”);
if (songToHighlight) songToHighlight.setAttribute(“aria-current”, “true”);
}

// Play song
function playSong(id) {
const song = userData.songs.find(s => s.id === id);
userData.currentSong = song;

audio.src = song.src;
audio.play();

highlightCurrentSong();
}

// Button to play first song
playButton.addEventListener(“click”, () => playSong(0));

// Playlist buttons
document.querySelectorAll(“.playlist-song”).forEach(songDiv => {
const id = Number(songDiv.id.split(“-”)[1]);
songDiv.querySelector(“button”).addEventListener(“click”, () => playSong(id));
});

errors:

You should use document.getElementById() and pass in `song-${userData.currentSong?.id}`.

2. You should use document.getElementById() and pass in `song-${userData.currentSong?.id}`.
3. You should assign your getElementById() to a songToHighlight variable.
link to the step:
https://www.freecodecamp.org/learn/full-stack-developer/workshop-music-player/step-37
2

why are you doing things with songToHighlight? you are just asked to create it for this step.

if you do more, the tests can fail

3

Much of your code is very different from the code which you should have started this step with. There is much missing code and some which has been modified unnecessarily.

This is your code for the highlightCurrentSong function:

You have changed the variable name previousCurrentSong to previous. You are also missing a line of code directly after it:
previousCurrentSong?.removeAttribute("aria-current");

Also, the two lines of code which you have after the songToHighlight variable should not be there in this step.

Finally, in getElementById, you are interpolating a variable, which means that you need to enclose everything in those parentheses inside a pair of backticks.

As there is much missing/modified code here and elsewhere, it’s probably best to Reset this step to restore the correct starting code.

Then, without removing/modifying any of the existing code, simply add the one line of code which declares the songToHighlight variable.

I hope that helps!