Как мне прикрепить обработчик события к текущему событию?

Question

Я хочу составить список ингредиентов и сделать возможным увеличение количества ингредиентов, нажав на кнопку «плюс».

Что происходит сейчас, когда я нажимаю кнопку «плюс» второго ингредиента, количество первого ингредиента увеличивается.

HTML

<div>
    <div class="ingr"><button>+</button><p><span>1</span> thea spoon(s) of sugar</p>
    </div>
    <div class="ingr"><button>+</button><p><span>2</span> courgettes</p>
    </div>
</div>

JavaScript

let buttons = document.querySelectorAll('button');
let num = document.querySelector('span');

var count = 0;

const increase = function(event) {
  count++;
  num.innerHTML = count;
}

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = increase;
}

Answer 1

span, который возвращается document.querySelector('span') и назначается переменной num в строке 2, является первым span в документе.Ссылка на num в строке 8 в функции increase является ссылкой на этот первый span.Если вы хотите изменить span, который является родственным братом нажатого button, вы можете выбрать span, ссылаясь на кнопку в функции increase как event.target:

let buttons = document.querySelectorAll('button');

const increase = function(event) {
  var buttonParentDiv = event.target.parentNode;
  var buttonSiblingSpan = buttonParentDiv.querySelector("span");
  buttonSiblingSpan.innerHTML++
}

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = increase;
}

Answer 2

В вашем исходном коде было бы непросто запросить каждый из элементов-элементов кнопок, чтобы увеличить их. В этом решении вы можете перебрать все узлы .ingr и применить функциональность к ним и их дочерним элементам, вызвав для них Ingredientize. Я расширил логику / html, чтобы справиться с уменьшением суммы.

function Ingredientize (el) {
  const Incrementor = el.querySelector('button.incrementor')
  const Decrementor = el.querySelector('button.decrementor')
  const QuantityElement = el.querySelector('span')
  
  const renderQuantity = value => QuantityElement.innerHTML = value
  
  let quantity = +QuantityElement.innerHTML || 0
  
  Incrementor.addEventListener('click', () => renderQuantity(++quantity) )
  Decrementor.addEventListener('click', () => renderQuantity(--quantity) )
}

const ingredients = document.querySelectorAll('.ingr')
ingredients.forEach(ingredientElement => Ingredientize(ingredientElement))

<div>
    <div class="ingr">
      <button class="incrementor">+</button>
      <button class="decrementor">-</button>
      <p>
        <span>1</span> thea spoon(s) of sugar
      </p>
    </div>
    <div class="ingr">
      <button class="incrementor">+</button>
      <button class="decrementor">-</button>
      <p>
        <span>2</span> courgettes
      </p>
    </div>
</div>