Не работают лайки с счетчиком HTML + JavaScript

Question

Как сделать, чтобы при нажатии на лайки и счетчик прибавлялся, и класс менялся. Получилось так, но счетчик обновляется лишь у последнего класса

HTML:

<div class="container">         
    <div class="row d-flex justify-content-around">
        <div class="card my-card2 mt-2">
            <div class="card-body">
                <div class="card-title blog-title">Earth Hour: What You Need to Know</div>
                <div class="card-text">Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading. Welcome to your blog po...</div>
                <hr>
                <div class="row">
                    <p class="svg-views ml-3"></p>
                    <p class="svg-comment"></p>
                    <div class="container col-8 d-flex justify-content-end">
                        <button type='button' class="heart">
                        </button>
                        <span class="likes-number">
                            0
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card my-card2 mt-2">
                <img src="image/blog1.webp" class="rounded mx-auto d-block fix-bcg" alt="blog1">
            <div class="card-body">
                <div class="card-title blog-title">Youth March for Climate...</div>
                <div class="card-text"></div>
                <hr>
                <div class="row">
                    <p class="svg-views ml-3"></p>
                    <p class="svg-comment"></p>
                    <div class="container col-8 d-flex justify-content-end">
                        <button type='button' class="heart">
                        </button>
                        <span class="likes-number">
                            0
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card my-card2 mt-2">
            <div class="card-body">
                <div class="card-title blog-title">Living Your Best Sustainable Life</div>
                <div class="card-text">Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading. Welcome to your blog po...</div>
                <hr>
                <div class="row">
                    <p class="svg-views ml-3"></p>
                    <p class="svg-comment"></p>
                    <div class="container col-8 d-flex justify-content-end">
                        <button type='button' class="heart">
                        </button>
                        <span class="likes-number">
                            0
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

JS:

let heart = document.querySelectorAll('.heart');
let likesNumb = document.querySelectorAll('.likes-number');

for(let likesNumbs of likesNumb) {
    for(let hearts of heart) {
        hearts.onclick = function(){
            if(hearts.classList.contains('added')){
                likesNumbs.textContent--;
            } else {
                likesNumbs.textContent++;
            }
            hearts.classList.toggle('added');
        }
    }
}

Answer 1

Я не очень понял что вы хотели сделать в двух циклах. Предлагаю сделать это так, пройтись по всем кнопкам и повесить обработчик, что при клике на эту кнопку поменять у нее класс, а у span число.

let hearts = document.querySelectorAll(".heart");
for (let heart of hearts) {
  heart.onclick = function(e) {
    this.classList.toggle("added");
    this.classList.contains("added") ? e.target.nextElementSibling.textContent++ : e.target.nextElementSibling.textContent --;
   }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <div class="container">
      <div class="row d-flex justify-content-around">
        <div class="card my-card2 mt-2">
          <div class="card-body">
            <div class="card-title blog-title">
              Earth Hour: What You Need to Know
            </div>
            <div class="card-text">
              Create a blog post subtitle that summarizes your post in a few
              short, punchy sentences and entices your audience to continue
              reading. Welcome to your blog po...
            </div>
            <hr />
            <div class="row">
              <p class="svg-views ml-3"></p>
              <p class="svg-comment"></p>
              <div class="container col-8 d-flex justify-content-end">
                <button type="button" class="heart"></button>
                <span class="likes-number">
                  0
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="card my-card2 mt-2">
          <div class="card-body">
            <div class="card-title blog-title">Youth March for Climate...</div>
            <div class="card-text"></div>
            <hr />
            <div class="row">
              <p class="svg-views ml-3"></p>
              <p class="svg-comment"></p>
              <div class="container col-8 d-flex justify-content-end">
                <button type="button" class="heart"></button>
                <span class="likes-number">
                  0
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="card my-card2 mt-2">
          <div class="card-body">
            <div class="card-title blog-title">
              Living Your Best Sustainable Life
            </div>
            <div class="card-text">
              Create a blog post subtitle that summarizes your post in a few
              short, punchy sentences and entices your audience to continue
              reading. Welcome to your blog po...
            </div>
            <hr />
            <div class="row">
              <p class="svg-views ml-3"></p>
              <p class="svg-comment"></p>
              <div class="container col-8 d-flex justify-content-end">
                <button type="button" class="heart"></button>
                <span class="likes-number">
                  0
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

БЛОГ НА HUSL

Не работают лайки с счетчиком HTML + JavaScript

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