在执行第二次搜索时如何重置CSS（从第一次搜索中删除搜索结果）

Question

I'm building a simple weather app in ES6 that is supposed to return a song from Spotify that fits the current weather alongside with the forecast. However, when a user performs two searches in a row for different locations it will still show the song from the first search.

Currently, I'm hiding the song tracks in CSS with display: none and changing the display to block in JS depending on the search result through if-statements. How can I remove the first song, so from the first search?

I tried changing the if-statements to a switch statement but it stopped displaying the songs altogether. Another option I thought of was using classList but I'm not sure how...

CSS

#musicRain,
#musicClear,
#musicThunderstorm,
#musicSnow,
#musicClouds,
#musicAtmosphere {
  display: none;
}

JS

function showCurrentWeather(response) {
  let currentTemperature = document.querySelector("#currentTemperature");
  currentTemperature.innerHTML = `${Math.round(response.data.main.temp)}°C`;
[etc... ]

if (response.data.weather[0].main === "Clear") {
    document.getElementById("musicClear").style.display = "block";
  }
  if (response.data.weather[0].main === "Drizzle") {
    document.getElementById("musicDrizzle").style.display = "block";
  }
  if (response.data.weather[0].main === "Rain") {
    document.getElementById("musicRain").style.display = "block";
  }
  if (response.data.weather[0].main === "Clouds") {
    document.getElementById("musicClouds").style.display = "block";
  } else {
    document.getElementById("musicAtmosphere").style.display = "block";
  }
}

Answer 1

You want to set every element's display field to either block or none so that earlier settings won't linger. Since they all start with "music" you could do this:

  const types = ["Clear","Drizzle","Rain","Clouds","Atmosphere"];
  types.forEach( type => {
    const musicType = `music${type}`
    if (response.data.weather[0].main === type) {
      document.getElementById(musicType).style.display = "block";
    }
    else {
      document.getElementById(musicType).style.display = "none";
    }
  });