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

Есть 5 кнопок:
<button class="photos__like-icon" type="button"></button>

И 5 дивов:
<div class="photos__like-count">254</div>

Как связать их, чтобы по клику на <button> менять на +1 число в соответствующем диве? И по повторному клику на -1.
  • Вопрос задан
  • 386 просмотров
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега JavaScript
const icons = [...document.querySelectorAll('.photos__like-icon')];
const counts = [...document.querySelectorAll('.photos__like-count')];

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('photos__like-icon')) {
    const count = counts[icons.indexOf(e.target)];
    count.classList.toggle('active');
    count.textContent -= [ 1, -1 ][+count.classList.contains('active')];
  }
});
Ответ написан
profesor08
@profesor08 Куратор тега JavaScript
При помощи 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;
  });
});

Ответ написан
Ваш ответ на вопрос

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

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