I'm hoping someone can tell me what I'm doing wrong here. When trying to log the value of artistBox in the hideProductCard function, it's returning 'undefined'. However, when logging the value of artistBox in the addArtistSelection function it returns with the correct value. Why is this happening? Both functions, as seen in the 'if/else if conditionals' are taking the same parameter and it is being passed along to both functions, but only one is working.
// Adding Artist Selection
let artistCheckBoxes = document.querySelectorAll('.artist-filter-input');
let artistProductCards = document.querySelectorAll('.store-card');
artistCheckBoxes.forEach((artistBox) => {
artistBox.addEventListener('click', () => {
if (artistBox.checked === true) {
addArtistSelection(artistBox);
hideProductCard(artistBox);
} else if (artistBox.checked === false) {
document.getElementById(`${artistBox.value}-selection`).remove();
}
});
});
let addArtistSelection = (artistBox) => {
let artistSelectionContainer = document.querySelector('.artist-selection-container');
let artistSelection = document.createElement('p');
artistSelection.classList = 'filter-selection artist-selection';
artistSelection.id = `${artistBox.value}-selection`;
artistSelection.innerHTML = `
${artistBox.value}
`;
artistSelectionContainer.appendChild(artistSelection);
};
let hideProductCard = (artistBox) => {
artistProductCards.forEach((productCard) => {
console.log(productCard.querySelector('.card-title').innerText);
console.log(artistBox.value);
});
};