Build a Music Instrument Filter - Step 13

JavaScript
1

Tell us what’s happening:

I don’t know why I’m not passing this test. I’ve done everything right, but I keep getting an error message that says: 'When the dropdown menu option is changed, you should set the inner HTML of productsContainer to the result of the instrumentCards function called with the selected option as an argument

Your code so far

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


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

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>`
        ;
    }).join('')
}


selectContainer.addEventListener("change", () => {
   productsContainer.innerHTML = instrumentCards(selectContainer.value)
  
});


// User Editable Region

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 13

2

you may want to reset the step and try again, you made more changes than that

3

You mean i should reset and start all over again

4

yes, reset this step so that you restore the code to the start of the step, and follow the instructions again

5

I still don’t pass the test :sob::sob::sob:

6

Please post your new code so we can help you :+1:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').