Можете подсказать, как правильно использовать метод forEach?

Как можно изменить код, чтобы при нажатии на плюс или минус число изменялось только рядом с этой кнопкой, вместо того чтобы изменялись все числа с классом 'count-number'?
  • 21 января 2024 г. 18:18
Ответы на вопрос 1
Конечно, я помогу вам с методом `forEach` и вашим вопросом.

Метод `forEach` используется для перебора элементов массива (или массивоподобных объектов, например, `NodeList`). Для каждого элемента массива вызывается функция, которая может применять к нему определенные действия.

Чтобы число изменялось только рядом с кнопкой, которую вы нажали, вам нужно установить обработчики событий для каждой группы кнопок и их связанных чисел. Вместо того чтобы изменять все числа с классом `'count-number'`, вы будете изменять только число, которое связано с кнопкой.

Предположим, у вас есть HTML следующего вида:

```html
<div class="counter">
  <button class="minus">-</button>
  <span class="count-number">0</span>
  <button class="plus">+</button>
</div>

<div class="counter">
  <button class="minus">-</button>
  <span class="count-number">0</span>
  <button class="plus">+</button>
</div>
<!-- ...и еще .counter блоки... -->
```

Вам надо установить обработчики для каждого набора кнопок и чисел. Используйте следующий JavaScript код:

```javascript
document.querySelectorAll('.counter').forEach((counter) => {
  const minusButton = counter.querySelector('.minus');
  const plusButton = counter.querySelector('.plus');
  const countNumber = counter.querySelector('.count-number');

  // Обрабатываем нажатие на кнопку "минус"
  minusButton.addEventListener('click', function() {
    countNumber.textContent = parseInt(countNumber.textContent, 10) - 1;
  });

  // Обрабатываем нажатие на кнопку "плюс"
  plusButton.addEventListener('click', function() {
    countNumber.textContent = parseInt(countNumber.textContent, 10) + 1;
  });
});
```

В этом коде мы сначала выбираем все блоки с классом `counter`. Затем, для каждого такого блока, находим внутри его дочерние элементы: кнопки и число. После чего, для каждой кнопки устанавливаем обработчик клика, который уменьшает или увеличивает значение текста в элементе с классом `count-number`, и это изменение применяется только внутри текущего блока `.counter`.

Таким образом, при нажатии на кнопку изменится число только в том блоке, в котором расположена кнопка.
Похожие вопросы