//embeding htm files
window.addEventListener("load", function () {
var allElements = document.getElementsByTagName("*");
Array.prototype.forEach.call(allElements, function (el) {
var includePath = el.dataset.includePath;
if (includePath) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
el.outerHTML = this.responseText;
}
};
xhttp.open("GET", includePath, true);
xhttp.send();
}
});
});
// showing items
const yearsOption = document.querySelector(".select");
yearsOption.addEventListener("change", filterYear());
function filterYear(e) {
const years = yearsOption.childNodes;
years.forEach(function (year) {
switch (e.target.value) {
case "2014":
if (year.classList.contains("2014")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2015":
if (year.classList.contains("2015")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2016":
if (year.classList.contains("2016")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2017":
if (year.classList.contains("2017")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2018":
if (year.classList.contains("2018")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
}
});
}
<div class="years_option">
year:
<select name="years" class="select">
<option value="2014" class="2014">2014</option>
<option value="2015" class="2015">2015</option>
<option value="2016" class="2016">2016</option>
<option value="2017" class="2017">2017</option>
<option value="2018" class="2018">2018</option>
</select>
</div>
<div class="table">
<div class="2014batters" data-include-path="/data/2014batters.htm">2014</div>
<div class="2015batters" data-include-path="/data/2015batters.htm">2015</div>
<div class="2016batters" data-include-path="/data/2016batters.htm">2016</div>
<div class="2017batters" data-include-path="/data/2017batters.htm">2017</div>
<div class="2018batters" data-include-path="/data/2018batters.htm">2018</div>
</div>
I am new to Coding. and I wrote a similar question before but I could not get an answer which I wanted. I think that is because my explanation was not good enough, so I'm writing this new question to clarify what I am questioning.
You can see several option tags in my html(2014~2018). You also can see several embeded htm files below(class name is 2014batters~2018batters) too. And here is a thing I want to make: When I choose 2014 among options, I only can see "2014batters.htm"div and else is not displayed. But I do not have a clue to build a code yet. If you can help me it would be great help for me. thanks!