I'm new to JavaScript. I want this animated like button on multiple places, but the JavaScript-CodePudding

window.addEventListener('DOMContentLoaded', () => {
  const heart = document.getElementById('heart');

  const likeUnlikePost = function() {
    if (heart.classList.contains('like')) {
      heart.classList.remove('like');
      heart.classList.add('unlike');
    } else {
      heart.classList.remove('unlike');
      heart.classList.add('like');
    }
  }
  heart.addEventListener('click', likeUnlikePost)
})

<div >
  <svg xmlns="http://www.w3.org/2000/svg" id="heart" viewBox="0 0 24 24">
       <path stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
   </svg>
</div>

CodePudding user response：

Maybe is a issue in this selector, and you get only first item with heart id`s.

const heart = document.getElementById('heart');

Try to change in

const heart = document.querySelectorAll('.heart');

And also change id heart in class heart because you can have only one ID on page with same name and get all elements with same class with for loop. After event use this keyword to manipulate only for a item where you click.

Something like here should work:

window.addEventListener('DOMContentLoaded', () => {
  const hearts = document.querySelectorAll('.heart');
  
  for (var i = 0; i < hearts.length; i  ) {
    hearts[i].addEventListener('click', function(event) {
      if (this.classList.contains('like')) {
      this.classList.remove('like');
      this.classList.add('unlike');
      } else {
        this.classList.remove('unlike');
        this.classList.add('like');
      }
      console.log('Heart clicked!');
    });
}
  
});

Here is HTML only changes ID in class:

   <div >
    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24">
       <path stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
   </svg>
   </div>

Good luck!

CodePudding user response：

The reason your animation has not been applied to all of your SVG buttons is that you have given an id to your SVG element so once the javascript has been executed it will look for the id 'heart'.

 const heart = document.getElementById('heart');

The fix for this is you would have to change your id in your SVG element to a class named 'heart'.

And then if you change your javascript as below you should see it will function as expected.

window.addEventListener('DOMContentLoaded', () => {
    const heart = document.querySelectorAll(".heart");
    for (let i = 0; i < 5; i  ) {
        let selectedHeart = heart[i]
        const likeUnlikePost = function() {
            if (selectedHeart.classList.contains('like')) {
                selectedHeart.classList.remove('like');
                selectedHeart.classList.add('unlike');
            } else {
                selectedHeart.classList.remove('unlike');
                selectedHeart.classList.add('like');
            }
        }
        selectedHeart.addEventListener('click', likeUnlikePost);
    }
})