Почему переменная при срабатывании инкремента не увеличивает своё значение?

Question

[MyNamee]

Привет, я новичок, изучаю самостоятельно JS и прошу помощи.
Нужно чтобы при срабатывании события (клик мыши по кнопке) создавался новый input, и у каждого следующего input класс был на единицу больше (у первого: .input-1, у второго: .input-2 и т.д.). Но почему-то счётчик (count) не увеличивается на единицу при каждом срабатывании события. Прошу помочь.

Код JavaScript

var buttonAdd = document.getElementById("button-add");
buttonAdd.addEventListener("click", function() {
    var todolistChilds = document.getElementById('todolist').getElementsByClassName('input').length;
    if(todolistChilds < 10) {
        var count = 1;
        var newInput = document.createElement('input');
        newInput.classList.add('input','input-' + ++count);
        todolist.appendChild(newInput);
    }
    else {
        alert('Ошибка');
    }
});

Comments

[Модератор]

Пожалуйста переименуйте текст вопрос в более конкретный, соответствующий сути. Для проекта Toster полезно, если вопросы правильно индексируются в поисковике, следовательно ответом на ваш вопрос смогут воспользоваться и другие.

Answer 1

[Владимир]

Вынеси var count = 1; после var buttonAdd = document.getElementById("button-add");
https://learn.javascript.ru/functions-closures

Comments

[MyNamee]

Большое спасибо!

[Владимир]

https://learn.javascript.ru/let-const

Answer 2

[Andrey Perov]

Сделайте через замыкание или property функции или по корявому вот так например:

var buttonAdd = document.getElementById("button-add");
var count = 1;
buttonAdd.addEventListener("click", function() {
    var todolistChilds = document.getElementById('todolist').getElementsByClassName('input').length;
    if(todolistChilds < 10) {
        var newInput = document.createElement('input');
        newInput.classList.add('input','input-' + ++count);
        todolist.appendChild(newInput);
    }
    else {
        alert('Ошибка');
    }
});

// как то так, код не проверял

Answer 3

[zxscv]

count у вас - локальная переменная которая после завершения функции теряется. Надо объявить var count = 1; в глобальном контексте