Javascript проблемы с замыканием

202

29 мая 2018, 05:40

Появилась необходимость написать простой счетчик (как товары в корзине интернет магазина +- у значения input). Всегда делал примерно вот так и проблем не было, все работало (упростил чтобы видна была суть):

var count = 1;
input.value = count;
next.addEventListener('click', function(){
    if(count < 4) {
        count++;
        input.value = count;
    }
});
prev.addEventListener('click', function() {
    if (count > 1) {
        count--;
        input.value = count;
    }
});

Считает от 1 до 4.

Но сейчас нужно вставить счетчик в модальное окно, которое будет вызываться по нажатию на разные элементы. Счетчик будет инициализироваться в момент появления окна (поместил счетчик в функцию). На первый взгляд все срабатывает нормально, все переключается, при закрытии окна и вызове другого окна значение поля ставится в 1 (как указано в 1й строке), НО если нажать на кнопку назад сразу после появления счетчика во второй++ раз (если предыдущее окно было закрыто на числе более чем 1), то он начинает отсчет обратно с того значения, на котором было закрыто прошлое окно, игнорируя if(count>1), как будто count сохраняет значение из предыдущего окна, хотя по идее я специально переназначил его в 1 на первой строке.

Хотелось бы разобраться в чем причина, по какому принципу это срабатывает и как лучше решить эту проблему?

Answer 1

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

next.addEventListener('click', function(){
    var count = input.value;
    if(count < 4) {
        count++;
        input.value = count;
    }
});
prev.addEventListener('click', function() {
    var count = input.value;
    if (count > 1) {
        count--;
        input.value = count;
    }
});