Параметр функции, возвращающий «неопределенный»

#javascript

Вопрос:

Я надеюсь, что кто-нибудь сможет сказать мне, что я здесь делаю не так. При попытке зарегистрировать значение artistBox в функции hideProductCard оно возвращает «неопределенное». Однако при регистрации значения artistBox в функции addArtistSelection оно возвращается с правильным значением. Почему это происходит? Обе функции, как видно из условия «если/иначе, если», принимают один и тот же параметр, и он передается обеим функциям, но работает только одна.

 // 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);
    });
}; 

Комментарии:

1. Предложение: Поместите точку останова отладки внутри своей addArtistSelection функции, шаг за шагом переходите от строки к строке и следите за значением artistBox . Может быть, ваши манипуляции с DOM ( .innerHtml = ... разрушают artistBox элемент?

2. @Martin_W Спасибо за ответ. Просто прошел через функцию addArtistSelection строка за строкой с помощью отладчика, и значение осталось правильным. Я также зарегистрировал artistBox.value в конце функции, и она выдала правильное значение. Понятия не имею, что здесь происходит.

3.Хммм… продолжайте использовать отладчик. Какова ценность artistBox между addArtistSelection(artistBox) и hideProductCard(artistBox) . И что происходит с ним внутри hideProductCard(artistBox) ?

4. @Martin_W Я заставил его работать. Я все еще довольно новичок в кодировании, поэтому я не уверен, в чем причина этого, но вместо того, чтобы использовать две функции (addArtistSelection и hideProductCard) в операторе if, я переместил hideProductCard в конец функции addArtistSelection. Надеюсь, это нормально. Все еще любопытно, почему это изначально не работало.

5. И, возможно, кто-то еще в SO заметит что-то в коде, что мы пропустили… Но иногда это вопрос «сейчас это работает… двигайся дальше!»