Как вывести значение счётчика кликов в каждую кнопку отдельно?

Question

[Pavel Shevelev]

Есть неограниченное кол-во кнопок на странице и нужно чтобы по нажатию на каждую в любом порядке отображалось кол-во кликов и выводилось в эту кнопку. По моему коду увеличивается общий счётчик counter, поэтому при клике на любую кнопку будет 1, а при клике на любую другую 2, а не 1, как должно быть.

https://codepen.io/Lu_Bu/pen/MWvOYvv

Comments

[Сергей delphinpro]

Сделайте отдельные счетчики для каждой кнопки. Замыкания в помощь.

[Сергей delphinpro]

В вашем случае достаточно перенести переменную counter внутрь цикла.

[Pavel Shevelev]

Сергей delphinpro, огромное спасибо!

[Pavel Shevelev]

Сергей delphinpro, покажите, пожалуйста, как это сделать через замыкание, у меня уже голова пухнет, так и не разобрался
Вот немного изменённый код
https://codepen.io/Lu_Bu/pen/dyzZoLN

[Сергей delphinpro]

Pavel Shevelev, https://codepen.io/delphinpro/pen/xxLPVGe?editors=1010

Answer 1

[Чипекве]

const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', countClicks));

function countClicks({ target }) { 
  target.innerHTML = (+target.innerHTML + 1) || 1;
}