1

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 ?

3 respuestas 3

1

getElementsByClassName devuelve un HTMLCollection, es decir una colección de elementos, no un elemento. Con lo cual, no podes cambiarle el estilo directamente.

Lo que tenés que hacer es recorrer la colección y cambiarle el estilo a cada uno de los elementos. Para hacer eso podes utilizar Array.from().

Por otro lado, tenés un error en el botón de todos tiene como parámetro todas.

function boton(clase) {
  switch (clase) {
    case "todos":
      Array.from(document.getElementsByClassName("montaje")).forEach(e => e.style.display = "flex");
      Array.from(document.getElementsByClassName("escenario")).forEach(e => e.style.display = "flex");
      Array.from(document.getElementsByClassName("dj")).forEach(e => e.style.display = "flex");
      break;

    case "montaje":
      Array.from(document.getElementsByClassName("montaje")).forEach(e => e.style.display = "flex");
      Array.from(document.getElementsByClassName("escenario")).forEach(e => e.style.display = "none");
      Array.from(document.getElementsByClassName("dj")).forEach(e => e.style.display = "none");
      break;

    case "escenario":
      Array.from(document.getElementsByClassName("montaje")).forEach(e => e.style.display = "none");
      Array.from(document.getElementsByClassName("escenario")).forEach(e => e.style.display = "flex");
      Array.from(document.getElementsByClassName("dj")).forEach(e => e.style.display = "none");
      break;

    case "dj":
      Array.from(document.getElementsByClassName("montaje")).forEach(e => e.style.display = "none");
      Array.from(document.getElementsByClassName("escenario")).forEach(e => e.style.display = "none");
      Array.from(document.getElementsByClassName("dj")).forEach(e => e.style.display = "flex");
  }
}
<div>
  <button onclick="boton('todos')" class="btn btn-primary">Todas</button>
  <button onclick="boton('montaje')" class="btn btn-primary">Animales</button>
  <button onclick="boton('escenario')" class="btn btn-primary">Comida</button>
  <button onclick="boton('dj')" class="btn btn-primary">Gente</button>
</div>

<img class="todos montaje" src="http://lorempixel.com/output/animals-q-c-300-300-1.jpg" alt="">
<img class="todos montaje" src="http://lorempixel.com/output/animals-q-c-300-300-2.jpg" alt="">
<img class="todos montaje" src="http://lorempixel.com/output/animals-q-c-300-300-3.jpg" alt="">
<img class="todos escenario" src="http://lorempixel.com/output/food-q-c-300-300-1.jpg" alt="">
<img class="todos escenario" src="http://lorempixel.com/output/food-q-c-300-300-2.jpg" alt="">
<img class="todos escenario" src="http://lorempixel.com/output/food-q-c-300-300-3.jpg" alt="">
<img class="todos dj" src="http://lorempixel.com/output/people-q-c-300-300-1.jpg" alt="">
<img class="todos dj" src="http://lorempixel.com/output/people-q-c-300-300-2.jpg" alt="">
<img class="todos dj" src="http://lorempixel.com/output/people-q-c-300-300-3.jpg" alt="">

0

Podrías usar spread operator para hacer que tus elementos seleccionados por clase sean iterables, luego usar una función que haga el trabajo.

const $montajes = [...document.getElementsByClassName('montaje')]
const $escenarios = [...document.getElementsByClassName('escenario')]
const $djs = [...document.getElementsByClassName('dj')]

function boton(clase) {
  switch(clase) {
    case "todos":
      setVisibility($montajes, 'block')
      setVisibility($escenarios, 'block')
      setVisibility($djs, 'block')
      break;
    case "montaje":
      setVisibility($montajes, 'block')
      setVisibility($escenarios, 'none')
      setVisibility($djs, 'none')
      break;
    case "escenario":
      setVisibility($montajes, 'none')
      setVisibility($escenarios, 'block')
      setVisibility($djs, 'none')
      break;
    case "dj":
      setVisibility($montajes, 'none')
      setVisibility($escenarios, 'none')
      setVisibility($djs, 'block')
      break;
  }
}

function setVisibility(items, visible) {
  items.forEach(item => item.style.display = visible)
}
.todos {
  margin: .5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <div class="row justify-content-center my-4">
    <div class="menu-galeria">
      <button onclick="boton('todos')" 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="https://picsum.photos/40/40?random=1" alt="">
    <img class="todos montaje" src="https://picsum.photos/40/40?random=2" alt="">
    <img class="todos escenario" src="https://picsum.photos/40/40?random=3" alt="">
    <img class="todos escenario" src="https://picsum.photos/40/40?random=4" alt="">
    <img class="todos dj" src="https://picsum.photos/40/40?random=5" alt="">
    <img class="todos dj" src="https://picsum.photos/40/40?random=6" alt="" >
  </div>
</div>

0

tu errror se da porque recibes una coleccion no un solo elemento lo mejor seria usar querySelectorAll()

puedes hacerlo asi:

function recorrer(clase,disp){
  let elementos = document.querySelectorAll("."+clase);

  for(x of elementos){
    x.style.display = disp;
  }
}

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";
            recorrer("montaje","flex");
            recorrer("escenario","flex");
            recorrer("dj","flex");
            break;
        case "montaje":
            // document.getElementsByClassName("montaje").style.display = "flex";
            // document.getElementsByClassName("escenario").style.display = "none";
            // document.getElementsByClassName("dj").style.display = "none";
            recorrer( "montaje","flex");
            recorrer("escenario","none");
            recorrer("dj","none");
            break;
        case "escenario":
            // document.getElementsByClassName("montaje").style.display = "none";
            // document.getElementsByClassName("escenario").style.display = "flex";
            // document.getElementsByClassName("dj").style.display = "none";
            recorrer( "montaje","none");
            recorrer("escenario","flex");
            recorrer("dj","none");
            break;
        case "dj":
            // document.getElementsByClassName("montaje").style.display = "none";
            // document.getElementsByClassName("escenario").style.display = "none";
            // document.getElementsByClassName("dj").style.display = "dj";
            recorrer( "montaje","none");
            recorrer("escenario","none");
            recorrer("dj","dj");
    } 
}
<div class="row">
        <div class="menu-galeria">
            <button onclick="boton('todos')" 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="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos montaje" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos montaje" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos montaje" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos montaje" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos montaje" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos montaje" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos escenario" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos escenario" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos escenario" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos escenario" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos escenario" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos dj" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos dj" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="" >
        <img class="todos dj" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
        <img class="todos dj" src="https://i.blogs.es/6c558d/luna-400mpx/1366_2000.jpg" alt="">
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.