Как сделать счетчик лайков?

Question

Как сделать что-бы при клике на картинку,её счетчик увеличивался? У меня почему-то работает только первый смайлик.Реализовать таким образом, чтобы добавление новых вариантов ответа не вело к добавлению новых функций

let smile = document.getElementsByClassName('smile__img');
let counterClick = document.getElementsByClassName('smile__counter');
let counter = 0;

console.log(smile);
console.log(counterClick);

// let x = нужно узнать по какому именно смайлику кликает пользователь

smile[x].addEventListener('click', function() {
    counterClick[x].innerHTML = '';
    counterClick[x].innerHTML += ++counter;
});

        <div class="smile">
            <img src="img/1.jpg" alt="" class="smile__img" id="smile">
            <span class="smile__counter" id="counter">0</span>
        </div>
        <div class="smile">
            <img src="img/2.jpg" alt="" class="smile__img" id="smile">
            <span class="smile__counter" id="counter">0</span>
        </div>
        <div class="smile">
            <img src="img/3.jpg" alt="" class="smile__img" id="smile">
            <span class="smile__counter" id="counter">0</span>
        </div>
        <div class="smile">
            <img src="img/4.jpg" alt="" class="smile__img" id="smile">
            <span class="smile__counter" id="counter">0</span>
        </div>
        <div class="smile">
            <img src="img/5.jpg" alt="" class="smile__img" id="smile">
            <span class="smile__counter" id="counter">0</span>
        </div>

Answer 1

// Выбираем все элементы с классом like
const likes = document.querySelectorAll('.like');

// В каждом элементе выбираем плюс и минус. Навешиваем на событие клик функцию render()
likes.forEach(like => {
  const plus = like.querySelector('.plus');
  const minus = like.querySelector('.minus');
  const counter_element = like.querySelector('.counter');
  
  let counter = 0;
  
  plus.addEventListener('click', () => {
    render(++counter, counter_element);
  });
  
  minus.addEventListener('click', () => {
    render(--counter, counter_element)
  });
});

// Функция обновляет текст
const render = (counter, counter_element) => counter_element.innerText = counter;

.like{
  font-size:24px;
  user-select: none;
}
.plus {
 color:green;
}
.minus{
  color:red;
}
.cursor{
  cursor:pointer;
}

<div class="like">
  <span class="plus cursor">+</span> <span class="minus cursor">-</span>  <span class="counter">0</span>
</div>
<hr>
<div class="like">
  <span class="plus cursor">+</span> <span class="minus cursor">-</span>  <span class="counter">0</span>
</div>

Answer 2

[...document.querySelectorAll('.smile')].forEach(function(el) {
  el.addEventListener('click', function() {
    let counter = this.querySelector('.smile__counter');
    counter.innerHTML = parseInt(counter.innerHTML) + 1;
  });
});

<div class="smile">
  <img src="img/1.jpg" alt="А" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/2.jpg" alt="Б" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/3.jpg" alt="В" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/4.jpg" alt="Г" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/5.jpg" alt="Д" class="smile__img">
  <span class="smile__counter">0</span>
</div>

Вариант без ...:

var smiles = document.getElementsByClassName('smile');

for (let i = 0; i < smiles.length; i++) {
  smiles[i].addEventListener('click', function() {
    let counter = this.querySelector('.smile__counter');
    counter.innerHTML = parseInt(counter.innerHTML) + 1;
  });
};

<div class="smile">
  <img src="img/1.jpg" alt="А" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/2.jpg" alt="Б" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/3.jpg" alt="В" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/4.jpg" alt="Г" class="smile__img">
  <span class="smile__counter">0</span>
</div>
<div class="smile">
  <img src="img/5.jpg" alt="Д" class="smile__img">
  <span class="smile__counter">0</span>
</div>

БЛОГ НА HUSL

Как сделать счетчик лайков?

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