Learn Basic String and Array Methods by Building a Music Player - Step 64

Tell us what’s happening:

Use a ternary operator to check if currentTitle evaluates to a truthy value. If it does, set playingSong.textContent to currentTitle. Otherwise, set it to an empty string.

Then below that, use a ternary operator to check if currentArtist is truthy. If so, set songArtist.textContent to currentArtist. Otherwise, set it to empty string.

I’m completely stuck on what to do here. My thought process on what I’m being told is:

  1. is currentTitle/Artist true (so set a tenery operator to perform something if true/false)
  2. if true, pull in the textContent from HTML and set it to currentTitle/Artist
  3. if false, set textContent to an empty string

I have no idea what’s wrong. My only other thought is that currentTitle/Artist need to be wrapped in a $ { } ? They didn’t seem to work though. Setting currentTitle/Artist == true ? also does not seem to work.

Your code so far

currentTitle  ? playingSong.textContent = currentTitle : playingSong.textContent = " ";
currentArtist ? songArtist.textContent = currentArtist : songArtist.textContent = " ";

Please copy/paste all the editor code showing in the challenge from where you just linked.

  const setPlayerDisplay = () => {
  const playingSong = document.getElementById("player-song-title");
  const songArtist = document.getElementById("player-song-artist");
  const currentTitle = userData?.currentSong?.title;
  const currentArtist = userData?.currentSong?.artist;

currentTitle  ? playingSong.textContent = currentTitle : playingSong.textContent = " ";
currentArtist ? songArtist.textContent = currentArtist : songArtist.textContent = " ";

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Basic String and Array Methods by Building a Music Player - Step 64

Let’s look at the first instruction again:

“Use a ternary operator to check if currentTitle evaluates to a truthy value. If it does, set playingSong.textContent to currentTitle. Otherwise, set it to an empty string.”

This is telling you that you are going to be setting the property playingSong.textContent to either the value in currentTitle or an empty string. When you set a variable to a value, which side of the equals sign does the variable name go on? It’s the same thing for setting a property on an object. So hopefully this gives you a hint as to how the line of code should begin.

Then you look at the “truthiness” of currentTitle to determine whether you are going to set playingSong.textContent to currentTitle or the empty string. This is a classic if/else decision, but instead of using the classic if/else structure you are going to use the ternary operator instead, which is just a shortcut for if/else. I’m assuming that the ternary operator was already covered in a previous step/course, but I don’t know where, so I can’t point you to a specific place in FCC to review. I would recommend you type “ternary” into the FCC search field at the top of the page. The first result that comes back for me seems to be a good review.

1 Like

Thank you! I had to take some time away from this because it just wasn’t clicking with me. Now I got it. I think I was overthinking it. Now it all makes sense what it was asking me to do looking at my solution.

1 Like

Thanks so much for the explanation. It helped me to understand the problem :slight_smile: