Construir un Filtro de Instrumentos Musicales - Paso 13

[agustin.lovagnini.v]

Cuéntanos qué está pasando:

El paso 13 me da error aunque uso productsContainer.innerHTML = instrumentCards(event.target.value) en el event listener. No sé qué estoy haciendo mal.

selectContainer.addEventListener(“change”, () => {

productsContainer.innerHTML = instrumentCards(selectContainer.value);

});

Tu código hasta el momento

<!-- file: index.html -->

/* file: styles.css */

/* file: script.js */
// User Editable Region

  productsContainer.innerHTML = instrumentCards(selectContainer.value);
});

// User Editable Region

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Información del Desafío:

Construir un Filtro de Instrumentos Musicales - Paso 13

freeCodeCamp.org

[Teller]

Bienvenido al foro @agustin.lovagnini.v

Por favor, publica tu código completo.

¡Que disfrutes programando!

[agustin.lovagnini.v]

const instrumentsArr = [

{ category: “woodwinds”, instrument: “Flute”, price: 500 },

{ category: “woodwinds”, instrument: “Clarinet”, price: 200 },

{ category: “woodwinds”, instrument: “Oboe”, price: 4000 },

{ category: “brass”, instrument: “Trumpet”, price: 200 },

{ category: “brass”, instrument: “Trombone”, price: 300 },

{ category: “brass”, instrument: “French Horn”, price: 4300 },

{ category: “percussion”, instrument: “Drum Set”, price: 500 },

{ category: “percussion”, instrument: “Xylophone”, price: 3000 },

{ category: “percussion”, instrument: “Cymbals”, price: 200 },

{ category: “percussion”, instrument: “Marimba”, price: 3000 }

]

const selectContainer = document.querySelector(“select”);

const productsContainer = document.querySelector(“.products-container”);

function instrumentCards(instrumentCategory) {

const instruments =

instrumentCategory === "all"

  ? instrumentsArr

  : instrumentsArr.filter(

      ({ category }) => category === instrumentCategory

    );

return instruments

.map(({ instrument, price }) => {

  return \`

      <div class="card">

        <h2>${instrument}</h2>

        <p>$${price}</p>

      </div>

    \`;

})

}

selectContainer.addEventListener(“change”, () => {

console.log(instrumentCards(selectContainer.value));

});

[Teller]

Hola @agustin.lovagnini.v

Necesitas configurar la propiedad .innerHTML del product Container.

Restablece tu código e inténtalo de nuevo.

¡Que disfrutes programando!

[agustin.lovagnini.v]

Gracias! Ya lo hice bien!