Нажатие лайки с цифрой

Question

Как сделать лайк со счётчиком, чтобы он лайкнул счётчик считал на 1 и обратно?

let like = document.querySelectorAll(".like");
for (let heart of like){
  heart.onclick = function(e){
    this.classList.toggle("active");
    this.classList.contains("active") ? e.target.nextElementSibling.textContent++ : e.target.nextElementSibling.textContent--;
  }
  console.log(like);
}
let like1 = document.querySelectorAll(".heart");
for (let heart of like1){
  heart.onclick = function(e){
    this.classList.toggle("heart");
    this.classList.contains("heart") ? e.target.nextElementSibling.textContent++ : e.target.nextElementSibling.textContent--;
  }
}
let like2 = document.querySelectorAll(".heart");
for (let heart of like2){
  heart.onclick = function(e){
    this.classList.toggle("check2");
    this.classList.contains("check2") ? e.target.nextElementSibling.textContent++ : e.target.nextElementSibling.textContent--;
  }
}

.like{
    position: absolute;
    top: 4750px;
    left: 310px;
}
.check{
    position: absolute;
    top: 4766px;
    left: 379px;
    color: white;
}

<div class="like" id="like">
     <img src="image/like.png" alt="">
</div>
<div class="check" id="check2">
     <p>0</p>
</div>

Я нажал лайк, а он выдаёт ошибку(

Answer 1

const likes = document.querySelectorAll('.like');

likes.forEach((like) => {
  const button = like.querySelector('button');
  const count = like.querySelector('.count');

  let counter = parseInt(count.textContent);

  button.addEventListener('click', () => {
    like.classList.toggle('active');
    like.classList.contains('active') ? counter++ : counter--;
    count.textContent = counter;
  });
});

.like {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.like.active {
  color: red;
}

<div class="like">
  <button>Like</button>
  <span class="count">0</span>
</div>

БЛОГ НА HUSL

Нажатие лайки с цифрой

Ответы (1 шт):