Блог

Главная - Вопросы по программированию - Не удается получить интервал цикла в прослушивателе событий внутри цикла

Не удается получить интервал цикла в прослушивателе событий внутри цикла

#javascript #html #loops #addeventlistener

#javascript #HTML #циклы #addeventlistener

Вопрос:

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

     var modalBody = document.getElementById("edit-body")
    function createPeriodsEditor(sequence){
     for(var i=1; i<7; i  ){
        console.log(i)
        var container = document.createElement("div")
        var hour = document.createElement("input")
        var minute = document.createElement("input")
        var active = document.createElement("input")
        var text = document.createElement("p")

        container.setAttribute("class", "row")
        text.innerHTML = "Period "   i
        hour.setAttribute("class", "column")
        hour.setAttribute("id", "periodInputHourS"   sequence   "P"   i)
        hour.setAttribute("placeholder", "Hour (24 scale)")
        minute.setAttribute("class", "column")
        minute.setAttribute("id", "periodInputMinuteS"   sequence   "P"   i)
        minute.setAttribute("placeholder", "Minute")
        active.setAttribute("type", "checkbox")
        active.setAttribute("id", "periodInputActiveS"   sequence   "P"   i)
        active.setAttribute("class", "column")
        active.setAttribute("checked", "")

        active.addEventListener( 'change', function() {
            console.log(i)
            if(!this.checked) {
                hour.value = ""
                minute.value = ""
            }
        });

        container.appendChild(hour)
        container.appendChild(minute)
        container.appendChild(active)

        modalBody.appendChild(text)
        modalBody.appendChild(container)
    }
}

Однако по какой-то причине каждый флажок (id =»активный») очищает только последние поля ввода, созданные в строке.

Когда я регистрирую i внутри цикла, он делает это правильно (1,2,3,4,5,6,7), но он показывает только 7, независимо от того, какой флажок (консоль.журнал находится внутри прослушивателя событий для изменения флажка) Я нажимаю. Что я делаю не так?

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

1. попробуйте for(let i=1 — затем прочитайте о области видимости переменной — разница между let и var — см., Как только произойдет этот обработчик изменений, i всегда будет 7

2. When I log i inside the loop, it does it correctly (1,2,3,4,5,6,7) этот цикл никогда не выведет 7 …. только 1,2,3,4,5,6 … потому что 7 не меньше 7 — но в обработчике изменений он будет регистрироваться ТОЛЬКО 7 потому, что это значение i в этот момент — см. Выше, Чтобы Исправить