В твоем коде в целом все не совсем корректно, вот готовый пример, рабочего, с комментами, попробуй разобрать его, думаю станет понятно и сможешь свой поправить.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.picture-block {
flex: 0 0 50%;
}
.picture-block__img {
width: 300px;
height: 400px;
}
.button.--active {
background: green;
}
</style>
</head>
<body>
<div class="row">
<div class="picture-block">
<img
class="picture-block__img"
src="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
alt=""
>
<div class="picture-block__control">
<button
type="button"
class="button --active"
data-img="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
>
left
</button>
<button
type="button"
class="button"
data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwGZ9e0gkF00Cew42Qi2FjfZAUd7QNDp-6V0IjU-FR&s"
>
right
</button>
</div>
</div>
<div class="picture-block">
<img
class="picture-block__img"
src="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
alt=""
>
<div class="picture-block__control">
<button
type="button"
class="button --active"
data-img="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
>
left
</button>
<button
type="button"
class="button"
data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwGZ9e0gkF00Cew42Qi2FjfZAUd7QNDp-6V0IjU-FR&s"
>
right
</button>
</div>
</div>
</div>
<script>
// Находим все кнопки
document.querySelectorAll('.button')
// Проходимся циклом по каждой
.forEach(btn => {
// Навешиваем на каждую слушатель, что бы при клике на кнопку срабатывала данная функция, можно повесить на родительский элемент и слушать клики внутри него
// что бы не искать родителя в changeImage где то на это есть статья в learnJS, найди сам, я забыл как называется влом искать.
btn.addEventListener('click', changeImage)
})
function changeImage(event) {
// Если кнопка активна и показывается это изображение, ничего не делаем, можно накинуть более конкретных проверок, например сравнивать url и т.д, но мне лень.
if (event.target.classList.contains('--active')) {
return
}
// event.target - кнопка по которой нажали - я как правило использую this и делаю все через ООП, но сейчас мне лень
// Корневой элемент
const parent = event.target.closest('.picture-block')
// Все кнопки управления
const controlButtons = parent.querySelectorAll('.button')
// Блок с картинкой для замены
const imgNode = parent.querySelector('.picture-block__img')
if (event.target.dataset.img) {
// подставим картинки
imgNode.src = event.target.dataset.img
// Удалим подсветку со всех кнопок
controlButtons.forEach(i => i.classList.remove('--active'))
// Добавим на нашу кнопку активный класс, для подсветки
event.target.classList.add('--active')
} else {
console.error('img not found')
}
}
</script>
</body>
</html>
