I am creating some sort of filter in a webpage section. when I click on a button, only the relatives divs should be shown. The first script i made to make this work, was with one function for each button, but since I'll have to add a lot more of buttons, I'd like to have only one function, and update it once added a new button. here's a code similar to that part of the webpage.`
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function filter1(){
var x = document.getElementsByClassName("fruit");
document.getElementById("all").onclick = function(){
x.style.display = "block"
};
document.getElementById("apples").onclick = function(){
x.style.display = "none"; document.getElementsByClassName(".apples").style.display = "block"
};
document.getElementById("lemons").onclick = function(){
x.style.display = "none"; document.getElementsByClassName(".lemons").style.display = "block"
};
}
function filter2(){
var x = document.getElementsByClassName("btn").onclick.textContent;
var y = document.getElementsByClassName("fruit");
if (x.toLowerCase().includes("all")) {
y.style.display = "block";
} else {
y.style.display = "none";
}
if (x.toLowerCase().includes("apples")) {
document.getElementsByClassName("apples").style.display = "block";
}
if (x.toLowerCase().includes("lemons")) {
document.getElementsByClassName("lemons").style.display = "block";
}
}
</script>
</head>
<body onload="filter1()">
<button id="all" class="btn">All</button>
<button id="apples"class="btn">Apples</button>
<button id="lemons"class="btn">Lemons</button>
<section>
<div class="apples fruit">Green Apple</div>
<div class="apples fruit">Red Apple</div>
<div class="lemons fruit">Yellow Lemon</div>
</section>
</body>
</html>
<style type="text/css">
.btn {
display: block
}
.fruit {
display: block
}
</style>`As you can see I thought of two different methods for this. the first one "filter1()" by adding an id for each button; the second one "filter2()" by cheching the .textContent propriety of the buttons.
None of these functions work, Can someone please tell me what's the right way to do this using Javascript, or what's wrong with this code? I'd like to use the "filter2()" function, but if you can fix both of them, it would be great.
I'm a complete beginner to coding. Thank you so much.