I want to create 5 buttons (Each button represent a season)
Each button should show a div of its episodes and hide the other episodes for the other seasons
But when I fetch episodes from the API, it only returns the episodes of the first season
HTML
<style>
.episodes-hide {
display: none;
}
</style>
<p>Select your size:</p>
<div id="season">
<button onclick="showSeasons(1)"> Season 1</button>
<button onclick="showSeasons(2)"> Season 2</button>
<button onclick="showSeasons(3)"> Season 3</button>
<button onclick="showSeasons(4)"> Season 4</button>
<button onclick="showSeasons(5)"> Season 5</button>
</div>
<div class="episodes-hide" id="1"> S1 </div>
<div class="episodes-hide" id="2"> S2 </div>
<div class="episodes-hide" id="3"> S3 </div>
<div class="episodes-hide" id="4"> S4 </div>
<div class="episodes-hide" id="4"> S5 </div>
JavaScript
// Toggle hide/Show seasons (This code works )
function showSeasons(s) {
var vis = document.querySelector('.episodes-show'),
season = document.getElementById(s);
console.log(season)
if (vis !== null) {
vis.className = 'episodes-hide';
}
if (season !== null) {
season.className = 'episodes-show';
};
}
Broken JavaScript code
fetch("https://www.breakingbadapi.com/api/episodes")
.then((res) => { return res.json() })
.then((data) => {
let episodes = data
// only keep the Breaking Bad episodes
//Because the API has another series
.filter((episode) => episode.series === "Breaking Bad")
return episodes;
})
.then((episodes) => {
episodes.forEach(e => {
if (e.season === "1") {
//Season 1
addEpisodes(e, 1);
// console.log(e.length) //6
} else if (e.season === "2") {
//Season 2
addEpisodes(e, 2);
// console.log(e.length) // Nothing is printed to the console
} else if (e.season === "3") {
//Season 3
addEpisodes(e, 3);
} else if (e.season === "4") {
//Season 4
addEpisodes(e, 4);
} else {
//Season 5
addEpisodes(e, 5);
}
});
})
function addEpisodes(e, x) {
// e => episode
// x => season number
const episodeCard = document.createElement("div");
episodeCard.className = "episode";
episodeCard.innerHTML =
`
<div class="episode-info">
<p class="episode-num"> Episode <b id="episode-num"> ${e.episode} </b> </p>
<h3 class="episode-title" id="episode-title"> ${e.title} </h3>
<p class="air_date"> ${e.air_date}</p>
</div>
`
document.getElementById(`${x}`).append(episodeCard);
/* And this line throws this error :
Uncaught (in promise) TypeError: document.getElementById(...) is null
*/
}