Как правильно написать функцию для JS?

Question

[Sektantik]

Друзья помогите решить задачу. Есть верстка.

<div class="slider__dots-inner">
        <div class="slider__dots-item"><span class="slider__dots-item--visited">блок 1</span></div>
        <div class="slider__dots-item"><span>блок 2</span></div>
        <div class="slider__dots-item"><span>блок 3</span></div>
        <div class="slider__dots-item"><span>блок 4</span></div>
      </div>

Это переключатели у слайдера, первый всегда при загрузки имеет класс slider__dots-item--visited, необходимо при щелчке по любому из блока убирать активный класс slider__dots-item--visited и добавлять его новому блоку. C JS только начал разбираться от того видимо туплю. Как пробовал решать.

let dots = document.querySelectorAll('.slider__dots-item');
    let addThumbnailClickHandler = function (dot) {
        dot.addEventListener('click', function () {
            dot.firstChild.classList.remove('slider__dots-item--visited');
            this.firstChild.classList.add('slider__dots-item--visited');
        });
    };
    for (let i = 0; i < dots.length; i++) {
        addThumbnailClickHandler(dots[i]);
    }

Проблема в том, что при загрузки страницы цикл отрабатывает сразу, при клике класс добавляется, но не убирается с предыдущих элементов. Вообщем я не знаю, как сделать так, что бы цикл был в функции которая срабатывала при клике по любому из элементов, для одного элемента я знаю как сделать, а вот для множества не догоняю. Просто получается замкнутый круг, для мониторинга множества блоков нужен цикл, а для вызова функции для любого из блоков нужен опять же цикл.

Answer 1

[Tim]