Как реализовать лайк на чистом js?

Question

[AlenaZavr]

Есть 5 кнопок:

<button class="photos__like-icon" type="button"></button>

И 5 дивов:

<div class="photos__like-count">254</div>

Как связать их, чтобы по клику на <button> менять на +1 число в соответствующем диве? И по повторному клику на -1.

Answer 1

[0xD34F]

Делегирование, назначаем обработчик клика один раз:

// при клике по кнопке определяем её индекс и хватаем .photos__like-count с таким же индексом
document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('photos__like-icon')) {
    const index = [...document.querySelectorAll('.photos__like-icon')].indexOf(t);
    const counter = document.querySelectorAll('.photos__like-count')[index];
    const count = counter.textContent;
    counter.textContent = t.classList.toggle('active') ? -~count : ~-count;
  }
});

// но если у каждой пары icon-count если отдельный общий предок, то можно и попроще сделать
document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.photos__like-icon')) {
    t
      .closest('селектор общего предка кнопки и элемента с количеством')
      .querySelector('.photos__like-count')
      .textContent -= t.classList.toggle('active') ? -1 : 1;
  }
});

Назначаем обработчик клика каждой кнопке индивидуально:

const toggleLike = function({ target: t }) {
  this[t.dataset.index].innerText -= [ 1, -1 ][+t.classList.toggle('active')];
}.bind(document.querySelectorAll('.photos__like-count'));

document.querySelectorAll('.photos__like-icon').forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', toggleLike);
});

// или, при наличии отдельных общих предков у каждой пары .photos__like-icon и .photos__like-count
const toggleLike = ({ target: t }) => t
  .closest('селектор общего предка кнопки и элемента с количеством')
  .querySelector('.photos__like-count')
  .innerText -= t.classList.toggle('active') ? -1 : 1;

for (const n of document.querySelectorAll('.photos__like-icon')) {
  n.addEventListener('click', toggleLike);
}

Answer 2

[profesor08]

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

Для тяжелых случаев

const likeButtons = Array.from(document.querySelectorAll(".photos__like-icon"));
const likeCounts = Array.from(document.querySelectorAll(".photos__like-count"));

likeButtons.forEach((button, index) => {
  button.addEventListener("click", () => {
    button.classList.toggle("is-active");
    const current = Number(likeCounts[index].innerHTML);
    const inc = button.classList.contains("is-active") ? 1 : -1;
    likeCounts[index].innerHTML = current + inc;
  });
});