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
