estoy intentando hacer una galería sencilla en JS pero parece que no me funciona. Estoy haciendo lo siguiente:
html:
<div class="row">
<div class="menu-galeria">
<button onclick="boton('todas')" class="btn btn-primary">Todas</button>
<button onclick="boton('montaje')" class="btn btn-primary">Montajes</button>
<button onclick="boton('escenario')" class="btn btn-primary">Escenarios</button>
<button onclick="boton('dj')" class="btn btn-primary">Equipamiento DJ</button>
</div>
</div>
<div class="row">
<img class="todos montaje" src="img1.jpg" alt="">
<img class="todos montaje" src="img2.jpg" alt="">
<img class="todos montaje" src="img3.jpg" alt="">
<img class="todos montaje" src="img4.jpg" alt="">
<img class="todos montaje" src="img5.jpg" alt="">
<img class="todos montaje" src="img6.jpg" alt="">
<img class="todos montaje" src="img7.jpg" alt="">
<img class="todos escenario" src="img8.jpg" alt="">
<img class="todos escenario" src="img9.jpg" alt="">
<img class="todos escenario" src="img10.jpg" alt="">
<img class="todos escenario" src="img11.jpg" alt="">
<img class="todos escenario" src="img12.jpg" alt="">
<img class="todos dj" src="img13.jpg" alt="">
<img class="todos dj" src="img14.jpg" alt="" >
<img class="todos dj" src="img15.jpg" alt="">
<img class="todos dj" src="img16.jpg" alt="">
</div>
Código JS: ( Lo que intento hacer es que dependiendo del botón al que le den, muestre eso y oculte el resto, se que no será lo más eficiente que exista, pero quiero entender lo que estoy haciendo y el por qué de no funionar bien).
function boton(clase) {
switch(clase) {
case "todos":
document.getElementsByClassName("montaje").style.display = "flex";
document.getElementsByClassName("escenario").style.display = "flex";
document.getElementsByClassName("dj").style.display = "flex";
break;
case "montaje":
document.getElementsByClassName("montaje").style.display = "flex";
document.getElementsByClassName("escenario").style.display = "none";
document.getElementsByClassName("dj").style.display = "none";
break;
case "escenario":
document.getElementsByClassName("montaje").style.display = "none";
document.getElementsByClassName("escenario").style.display = "flex";
document.getElementsByClassName("dj").style.display = "none";
break;
case "dj":
document.getElementsByClassName("montaje").style.display = "none";
document.getElementsByClassName("escenario").style.display = "none";
document.getElementsByClassName("dj").style.display = "dj";
}
}
¿ Qué estoy haciendo mal ?