👋 Есть три кнопки, с помощью замыкания нужно показывать на самой

кнопке количество нажатий на каждую из них.

const parent = document.querySelector('.wrapper');

function closure() {
let count = 0;
return function() {
count++;
this.innerText = count;
}
}

let a = closure();

parent.addEventListener('click', (e) => {
a.call(e.target);
})

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

ну так что значит не плодить, если вам нужно на каждую кнопку?)

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

На контейнер повесить слушатель, а не на каждую кнопку

там так и есть, внимательнее, молодой человек

слушатель и так на контейнере

Ой, простите)

А зачем лаконичнее? Для себя?

конечно)

а замыкание зачем вам всё-таки

нашел у себя большой пробел по ним, пробую решать

Есть очень сложный ответ на твой вопрос) Не надо лаконичнее, поверь. Если не лень почитать могу скинуть материал по теме.

давай)

На англ. правда https://overreacted.io/goodbye-clean-code/

спасибо)

function closure() { const counter = new Map(); return function() { if (counter.has(this)) { counter.get(this).val++; } else { counter.set(this, { val: 1 }); } this.textContent = counter.get(this).val; } } const parent = document.querySelector('.wrapper'); const counter = closure(); parent.addEventListener('click', ({ target }) => counter.call(target)); такое, мб, проканает. но можно и покрасивше написать

рил сложно для меня) буду разбираться, спасибо)

я там чуть ещё подрихтовал, чтоб чуть приятнее стало. проверьте, работает ли

работает прекрасно)

а, ну ок, потому что я ничё не проверял хд

Слушай, а зачем counter.call? Что если без this и в closure передавать event? Тогда прям совсем красиво будет)

я взял оригинальное решение, не более. сам бы я и сделал, чтоб он элемент принимал

function Counter() { const _counter = new Map(); return { count(element) { _counter.set(element, _counter.has(element) ? _counter.get(element) + 1 : 1); return _counter.get(element); }, get counter() { return _counter } }; } const counter = Counter(); document.querySelector(".wrapper").addEventListener("click", ({ target }) => { target.textContent = counter.count(target); console.log(counter.counter); }); но в итоге я бы +- так написал, потому что у вас очевидное нарушение SRP было. и не должна была та фигня отвечать за отрисовку над названиями, мб, стоит поработать, но это уже другой вопрос)

const btns = document.querySelectorAll('.btn'); function closure() { let count = 0; return function() { count++; this.innerText = count; } } btns.forEach(e => { e.addEventListener('click', closure()); })