@Locket

Почему массив элементов не выводится?

Получил массив карточек товара cards их 4 штуки, далее в цикле решил их взять за условие, чтобы кнопки добавления/удаления количества товара отталкивались от этого значения, потому что их тоже 4 штуки по одной в каждом cards. Но почему-то работает только нулевая кнопка в первой карточке, а все остальные просто не рабочие. В консоли тоже ничего не выводится. Может я что-то не понимаю? Объясните пожалуйста.
602ba730c0c43815603516.png
let cards = document.querySelectorAll('.product_card');
let btnAdd = document.querySelectorAll('.card_button_plus');
let btnRemove = document.querySelectorAll('.card_button_minus');
let input = document.querySelectorAll('.card_input');

let index = 0;
let count = 2;

for(index; index < cards.length; index++){
    btnAdd[index].addEventListener('click', () =>{
        input[index].value = count++;
    });
    btnRemove[index].addEventListener('click', removeNum);
}

console.log(cards);


HTML код
<div class="product_card">
            <div class="product_count">
                <button class='card_button_minus card_buttons'>-</button>
                <form action="#">
                    <input type="number" class='card_input' min='1' max='99' step='1' value='1'>
                </form>
                <button class='card_button_plus card_buttons'>+</button>
            </div>
        </div>
        <div class="product_card">
           <div class="product_count">
                <button class='card_button_minus card_buttons'>-</button>
                <form action="#">
                    <input type="number" class='card_input' min='1' max='99' step='1' value='1'>
                </form>
                <button class='card_button_plus card_buttons'>+</button>
            </div>
        </div>
        <div class="product_card">
            <div class="product_count">
                <button class='card_button_minus card_buttons'>-</button>
                <form action="#">
                    <input type="number" class='card_input' min='1' max='99' step='1' value='1'>
                </form>
                <button class='card_button_plus card_buttons'>+</button>
            </div>
        </div>
        <div class="product_card">
            <div class="product_count">
                <button class='card_button_minus card_buttons'>-</button>
                <form action="#">
                    <input type="number" class='card_input' min='1' max='99' step='1' value='1'>
                </form>
                <button class='card_button_plus card_buttons'>+</button>
            </div>
        </div>
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Если я верно понял, то проблема в том, что счётчик у карточек не работал.
И тогда ответ такой: потому что Вам стоит подучить область видимости, контекст, замыкания.
хотфикс:
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Pavel_20
@Pavel_20
а где сама функция removeNum, которая в событии вызывается?
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы