The "like button" function only increases the number of likes for a certain section whenever it's clicked

Question

There's something wrong with my heart buttons under the "Recommended for You" section. On the "Recipe of the Day" post, the heart button works just fine. What I'm trying to do is get the number of likes for the posts on the right side to increase too. However, whenever I click the other heart buttons under the "Recommended for You" section, they only increase the number of likes for the ROTD post.

Here's the JavaScript and HTML code I used:

console.log("JavaScript is connected");

let numCount = 68
let count = document.querySelector('.count')
function addLike () {
    numCount ++
    count.innerText = numCount
}

Whenever I try to create separate functions for the RFY section posts and do the same thing for the other heart buttons, they all just stop working and don't do anything.

Here's a video to show what I'm talking about: https://www.youtube.com/watch?v=8NYqizDBkZk

user_9549012 · Answer

It's because querySelector always returns the first element that matches the query. When you do

document.querySelector('.count')

It's always giving you the same .count div, regardless of which like button was pressed.

You need to use a more specific query like .likebtn2 .count, or give each count a unique class name.

user_10789986 · Answer

document.body.addEventListener('click', (event) => {
  const button = event.target.closest('.button');

  if (!button) return;

  const container = button.closest('.likes');

  if (!container) return;

  const counter = container.querySelector('.counter');

  if (!counter) return;

  counter.innerText = Number(counter.innerText) + 1;
});

user_8500718 · Answer

Change your JS code to the one I have and then add the this keyword to your button that invokes the JS function.

function addLike(e){
  let count = Number(e.nextElementSibling.innerText) + 1;
  e.nextElementSibling.innerText = count;
}

The "like button" function only increases the number of likes for a certain section whenever it's clicked

3 Answers