Currently working on a project where I am utilizing vanilla HTML/CSS/JS. My goal is to hide all items on a page initially, set a default option in a select tag, display only the element with the selected ID, and allow the user to choose different time periods using a dropdown menu to display the corresponding element.
However, I am encountering an issue with my code structure. I have set up the function as follows, including a console log to track its execution. Despite this, the log only appears once and the event handler seems to not be firing correctly, no matter which option I select from the filter. I believe I have followed the examples closely, so I'm unsure of what the problem might be. Can you identify the issue?
var day = document.getElementById("day");
var week = document.getElementById("week");
var month = document.getElementById("month");
period = document.getElementById("filter");
function loadPost(period) {
// Hide all posts
day.style.display = "none";
week.style.display = "none";
month.style.display = "none";
switch (period) {
case day:
showDay();
break;
case week:
showWeek();
break;
case month:
showMonth();
break;
}
console.log(period);
}
function showDay() {
day.style.display = "block";
}
function showWeek() {
week.style.display = "block";
}
function showMonth() {
month.style.display = "block";
}
period.addEventListener("change", loadPost(period.value)); <div class="most-popular">
<h1>Most Popular</h1>
<label for="most-popular-filter">Filter:</label>
<select name="most-popular-filter" id="filter">
<option value="day">Day</option>
<option value="week">Week</option>
<option value="month">Month</option>
</select>
<div class="content-box" id="day">
<img src="images/placeholder.png" alt="most-popular">
<h2>Most Popular 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</div>
<div class="content-box" id="week">
<img src="images/placeholder.png" alt="most-popular">
<h2>Most Popular 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</div>
<div class="content-box" id="month">
<img src="images/placeholder.png" alt="most-popular">
<h2>Most Popular 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</div>
</div>