1

Не правильно работает счетчик товара, чем больше товаров тем больше счетчик +-.

Структура кода.

При нажатии кнопки добавить в корзину:

$('.btn-add-cart').click(function(e){
createCartElement(); });

Идет вызов функции в которой, при каждом нажатии, создается карточка с товаром:

out += '<button class="btn-counter minus"><p class="btn-text">-</p></button>';
out += '<input class="counter" value="1">';
out += '<button class="btn-counter plus"><p class="btn-text">+</p></button>';

cartItem.innerHTML = out;
cartItems.append(cartItem);

Внутри этой же функции обрабатывается нажатие на кнопки + и - с выводом счетчика:

$('.btn-counter.plus').click(function(e) {

  let input = parseInt(e.target.parentElement.parentElement.children[1].value);
  input = input + 1;
  e.target.parentElement.parentElement.children[1].value = input;
});

$('.btn-counter.minus').click(function(e) {
  let input = parseInt(e.target.parentElement.parentElement.children[1].value);
  input = input - 1;
  e.target.parentElement.parentElement.children[1].value = input;
  if (input == 0) {
    input = 1;
  }
});

И так, суть проблемы заключается в том, что при первом нажатии на кнопку (добавить в корзину)- добавляется один товар и все работает хорошо, счетчик добавляет +1 и -1, создали еще одну, старая карточка +2 -2, а новая +1 -1 итд (+3 -3), скорее всего при создании нового элемента оно передает значение старому, прошу помочь с данной проблемой, пробовал уже разные варианты, ничего толкового не нашел.

2
  • у вас в createCartElement() каждые раз на все btn-counter навешиваются события? Можно вынести в содержимое обработчиков +/- в отдельные функции и создавать кнопки как элементы с присвоением btn.onclick = funcItemIncrement(). Возможно нужно что бы funcItemIncrement возращала fn () => e=> {} что бы можно было это делать : e.target.parentElement.parentElement.children
    – Gosha
    Commented 7 мая 2020 в 14:27
  • @Gosha, при каждом вызове createCartElement() создается btn-counter, я выносил в отдельные функции и вызывал при клике, происходило тоже самое, возможно я не совсем понимаю, что вы имели ввиду, я просто пока не очень силен в js, можете дать пример функции ?
    – Denis
    Commented 8 мая 2020 в 15:16

2 ответа 2

0

На один и тот же DOM-элемент можно вешать сколько угодно слушателей событий.

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

То есть, создал кнопку -> повесил события на все кнопки с селектором .btn-counter.plus. В твоем случае ход действий получился такой

1. Создать счетчик 1
2. Добавить в DOM.
3. Повесить событие на счетчик 1. (1 х1)
4. Создать счетчик 2
5. Добавить в DOM.
6. Повесить событие на счетчик 1 и 2 (1 х2, 2 х1)
7. Создать счетчик 3
8. Добавить в DOM.
9. Повесить событие на счетчик 1, 2 и 3 (1 х3, 2 х2, 3 х1)

... и тд.

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

Лучше упростить задачу браузеру:

const createButton = (className, text, clickListener) => {
    const btn = document.createElement('button');
    btn.className = className;
    const label = document.createElement('p');
    label.className = 'btn-text';
    label.appendChild(document.createTextNode(text));
    btn.addEventListener('click', clickListener);
    btn.appendChild(label);
    return btn;
};

const createInput = () => {
    const input = document.createElement('input');
    input.className = 'counter';
    input.value = 1;
    return input;
};

const createCartElement = () =>
    cartItems.append(
        createButton('btn-counter minus', '-', removeFromCart); // TODO: implement removeFromCart
        createInput(),
        createButton('btn-counter plus', '+', addToCart); // TODO: implement addToCart
    );
}
7
  • спасибо за ответ, так мне нужно вынести обработчик из создания элемента корзины ? или все же вешать обработчик во время создания элемента не используя общий селектор ?
    – Denis
    Commented 13 мая 2020 в 10:34
  • я скорее всего не правильно Вас понял, в какой именно момент нужно создавать счетчик? я создал во время нажатия на добавить товар, сам счетчик работает нормально но при каждом нажатии создается новый счетчик в новом элементе и добавляется в старый, именно верстка, скорее всего мне нужно вынести за область видимости само создание верстки счетчика.
    – Denis
    Commented 13 мая 2020 в 13:20
  • дело не в создании счетчика, а в том, на какие элементы вешаются обработчики в момент создания счетчика. сейчас у вас события вешаются всегда на все созданные. а надо только на те, которые были созданы прямо сейчас. Модифицировать ваш код в рабочий будет костыльно, потому что через innerHTML вы не имеете ссылок на созданные DOM-элементы. Поэтому придется как-то уродливо их добывать через .children.slice(-3) (забрать три последние добавленные ноды, потом из низ забрать кнопки) или что-то подобное. Лучше создавать элементы с помощью DOM Api и сразу вешать обработчики на нужные кнопки
    – Yugofx
    Commented 13 мая 2020 в 13:26
  • не могли бы Вы дать пример как это должно выглядеть с помощью DOM Api, я не силен в этом, можно хотя бы наводку?
    – Denis
    Commented 15 мая 2020 в 9:41
  • innerHTML - это тоже часть DOM Api, я некорректно выразил мысль. Я имел ввиду, создание HTML элементов не через строку в innerHTML, а через методы document.createElement, document.createTextNode и тп. Просто замените вашу функцию createCartElement на код, который я написал выше Большинство методов управления DOM-элементами находятся на объектах Document, Node, Element. developer.mozilla.org/ru/docs/Web/API/Node developer.mozilla.org/ru/docs/Web/API/Element
    – Yugofx
    Commented 15 мая 2020 в 9:44
0

это просто пример, но он показывает что надо

const wrapItems = document.querySelector('#list');

const createButton = (isAdd, elementInput) => {
  let operation;
  let cssClass;

  const btn = document.createElement('button');
  if (isAdd === true) {
    operation = '+';
    cssClass = 'plus'
    btn.onclick = () => elementInput.value = parseInt(elementInput.value, 10) + 1;
  } else {
    operation = '-';
    cssClass = 'minus';
    btn.onclick = () => elementInput.value = parseInt(elementInput.value, 10) - 1;
  }
  btn.classList.add('btn-counter', cssClass);

  btn.innerHTML = `<p class="btn-text">${operation}</p>`;

  return btn;
}

document.querySelector('#add-item').addEventListener('click', () => {
  const itemDiv = document.createElement('div');
  const input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.value = 1;
  const btnPlus = createButton(true, input);
  const btnMinus = createButton(false, input);

  itemDiv.append(btnMinus, input, btnPlus);

  wrapItems.appendChild(itemDiv);
});
<button id="add-item">add</button>
<div id="list"></div>

а еще, если это допустимо, можно использовать <input type="number" step="1" min="0">

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.