Почему скрипт работает только на первом div'e?

Question

[Андрей]

Есть три div'a. Я писал для них скрипт изначально так, чтобы обрабатывались все (с querySelectorAll и перебором коллекций через for), но сейчас работает только на первом. Скрипт просто зачёркивает text при нажатии на flag и показывает close, при нажатии на который task удаляется.

В Html (все остальные div'ы такие же):

<div class="wrapper">
        <div class="item">
            <div class="item__title">Понедельник</div>
            <ul class="item__list">
                <li class="item__list__task">
                    <div class="item__list__task__flag"></div>
                    <div class="item__list__task__text">Задача</div>
                    <div class="item__list__task__close"></div>
                </li>
                <li class="item__list__task">
                    <div class="item__list__task__flag"></div>
                    <div class="item__list__task__text">Задача</div>
                    <div class="item__list__task__close"></div>
                </li>
                <li class="item__list__task">
                    <div class="item__list__task__flag"></div>
                    <div class="item__list__task__text">Задача</div>
                    <div class="item__list__task__close"></div>
                </li>
            </ul>
        </div>
    </div>

В Js:

var items = document.querySelectorAll('.item');

var doneTask = function (task){
    var flag = task.querySelector('.item__list__task__flag');
    var text = task.querySelector('.item__list__task__text');
    var close = task.querySelector('.item__list__task__close');

    flag.addEventListener('click', function(){
        flag.classList.toggle('item__list__task__flag_active');
        text.classList.toggle('item__list__task__text_active');
        close.classList.toggle('item__list__task__close_active');
    })
}

var delTask = function (task) {
    var close = task.querySelector('.item__list__task__close');

    close.addEventListener('click', function(item){
        task.remove();
    })
}

for (var i = 0; i < items.length; i++){
    var list = items[i].querySelector('.item__list');
    var tasks = list.children;

    for(var i = 0; i < tasks.length; i++){
        doneTask(tasks[i]);
        delTask(tasks[i]);
    }
}

Answer 1

[Дмитрий]

Переименуйте переменную внутреннего цикла а лучше пользуйтесь современным синтаксисом const или let

Comments

[Андрей]

Ого, спасибо тебе, добр человек. Я как-то не мог додуматься, что может быть ошибка с переменной-счётчиком)

[Дмитрий]

Андрей, Я просто смотрю код и когда вижу что он абсолютно рабочий по смыслу, начинаю автоматом приглядываться к мелочам =)