Estoy creando algún tipo de filtro en una sección de página web. cuando hago clic en un botón, solo se deben mostrar los divs de parientes. El primer script que hice para que esto funcionara tenía una función para cada botón, pero como tendré que agregar muchos más botones, me gustaría tener solo una función y actualizarla una vez que agregue un nuevo botón. . aquí hay un código similar a esa parte de la página web.
<!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>`Como puede ver, pensé en dos métodos diferentes para esto. el primero "filter1()" agregando una identificación para cada botón; el segundo "filter2()" comprobando la propiedad .textContent de los botones.
Ninguna de estas funciones funciona. ¿Puede alguien decirme cuál es la forma correcta de hacer esto usando Javascript, o qué hay de malo en este código? Me gustaría usar la función "filter2()", pero si puede arreglar ambos, sería genial.
Soy un completo principiante en la codificación. Muchas gracias.