Задать вопрос
@safo4eg

Событие change. Почему счетчик работает не корректно?

Вот код - https://codepen.io/Safo4eg/pen/JjpOxry

Суть работы: мы выбираем чекбокс и его data-price уходит в массив и считает сумму, но когда убираем чекбокс соответственно сумма должна стать меньше на значение data-price убранного элемента, но почему-то все время убирает именно последнее добавленное значение в массив, в чем проблема?

Просто справа количество товаров отображается корректно именно рядом с тем чекбоксом, где и происходит событие

Скину 200 руб. на телефон тому кто объяснит мне
  • Вопрос задан
  • 46 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Потому что вы добавляете в selectedContactValues числа, а ищете в нём строку.
indexOf использует строгое сравнение, ничего не находит и, соответственно, выдаёт -1.
splice, в свою очередь, получив -1 удаляет первый с конца элемент массива.
Ответ написан
@alexalexes
Нужно добавить специальную функцию обертку, чтобы изолировать переменные.
item.addEventListener('change', (function(item, i) // функция обертка для функции обработчика, содержит переменные, которые нужно изолировать 
{

return function() { //возврат функции-обработчика для лисенера
     if(item.checked) {
         selectedContactValues.push(parseInt(item.dataset.price));
         countElements[i].value = 1;
     } else {
         selectedContactValues.splice(selectedContactValues.indexOf(item.dataset.price),1);
         countElements[i].value = 0;
     }
        
        resultElement.textContent =  sumArray(selectedContactValues);
    }; // конец функции обработчика событий, переменные которые нужно пропустить через замыкание

})(item, i) // конец функции обертки
);

ПС: Возможно, тут нужно клонировать объект item:
})(JSON.parse(JSON.stringify(item)), i) // конец функции обертки

Данный способ склонирует только структуру и данные объекта без ссылок на функции и ссылок на DOM.
ППС: Или брать arr[i] внутри обертки в качестве item, тогда изолировать придется только i:
item.addEventListener('change', (function(i) // функция обертка для функции обработчика, содержит переменные, которые нужно изолировать 
{

return function() { //возврат функции-обработчика для лисенера
let item = arr[i]; // берем item из внешнего массива arr, но по изолированному индексу i     
if(item.checked) {
         selectedContactValues.push(parseInt(item.dataset.price));
         countElements[i].value = 1;
     } else {
         selectedContactValues.splice(selectedContactValues.indexOf(item.dataset.price),1);
         countElements[i].value = 0;
     }
        
        resultElement.textContent =  sumArray(selectedContactValues);
    }; // конец функции обработчика событий, переменные которые нужно пропустить через замыкание

})(i) // конец функции обертки
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы