Как можно сделать, чтобы при нажатии на кнопку пагинации показывался соответствующий блок с изображением в java script?
products - коллекция блоков с изображениями, где активный класс - product-slider__wrapper--active
paginationButtons - коллекция кнопок, где активная кнопка класса - slider-pagination__button--current
const onPaginationButtonClick = (evt) => {
// Ищем нажатую кнопку в коллекции, чтобы связать ее с номером блока с изображением
for (let k = 0; k < paginationButtons.length; k++) {
if(evt.target = paginationButtons[k]) { // Возникает ошибка: Cannot set property target of #<Event>
// Ищем активный блок с изображением в коллекции
for (let i = 0; i < products.length; i++) {
if(isActive(products[i])) {
// Убираем активный класс с текущего блока с изображением
products[i].classList.remove('product-slider__wrapper--active');
// Добавляем активный класс к блоку с изображением, связанному с нажатой кнопкой
products[k].classList.add('product-slider__wrapper--active');
paginationButtons[k].classList.add('slider-pagination__button--current');
// Возможно, нужно добавить break, но не понятно, где
}
}
}
};
}
// Назначаем обработчик событий для каждой кнопки
const chooseSlide = () => {
paginationButtons.forEach((sliderButton) => {
sliderButton.addEventListener('click', onPaginationButtonClick)
});
}
Ошибка возникает из-за неправильного условия внутри цикла for. Вместо `if(evt.target = paginationButtons[k])` нужно использовать `if(evt.target === paginationButtons[k])`.
Также стоит добавить `break` после добавления класса к блоку с изображением, чтобы прервать внутренний цикл после найденного активного блока.
И еще одно замечание - внутри обработчика событий `onPaginationButtonClick` вы используете функцию `isActive`, которая не определена в предоставленном коде. Вам нужно определить эту функцию, чтобы она возвращала true для активного блока с изображением и false для всех остальных блоков.
Вот исправленный код:
```javascript
const onPaginationButtonClick = (evt) => {
for (let k = 0; k < paginationButtons.length; k++) {
if(evt.target === paginationButtons[k]) {
for (let i = 0; i < products.length; i++) {
if(isActive(products[i])) {
products[i].classList.remove('product-slider__wrapper--active');
products[k].classList.add('product-slider__wrapper--active');
paginationButtons[k].classList.add('slider-pagination__button--current');
break; // добавляем break после добавления класса
}
}
}
}
};
const chooseSlide = () => {
paginationButtons.forEach((sliderButton) => {
sliderButton.addEventListener('click', onPaginationButtonClick)
});
};
```
Не забудьте определить функцию `isActive`, чтобы код работал правильно.
Используйте операторы == или === для проверки, а не для присваивания.evt.target === paginationButtons[k]