Build a Music Instrument Filter - Step 13

JavaScript
1

Tell us what’s happening:

I don’t know what’s wrong with my code!
Everything is running fine but still getting this error.
“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 argument.” Here is my COde below: selectContainer.addEventListener(“change”, () => {
productsContainer.innerHTML = instrumentCards(selectContainer.value).join(‘’);
});

Your code so far

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


/* file: styles.css */


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

const selectContainer = document.querySelector(".select-container");
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", () => {
     productsContainer.innerHTML = instrumentCards(selectContainer.value).join('');
});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 13

1 Like
2

hello and welcome to fcc forum :slight_smile:

  • why are you using “.join(‘’)”

try without it, happy coding :slight_smile:

4

Already tried without .join but still not working

5

Price should have a $.

1 Like
6

did that, but stilll getting the same error. $${price}. did it this way

7

restart and simply try that aforementioned code without “join()”, failing that try another browser where you dont have any “dark theme” types of extension installed…

happy coding :slight_smile:

2 Likes
8

Thanks, this worked for me :smiling_face:

1 Like
9

i’m having the same problem, the dropdown menu working when i click on it but code won’t pass

10

please create your own topic to ask for help

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

11

thank you, all ready solved.