Javascript-форум - Сделать обработчик кликов с замыканием

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Сделать обработчик кликов с замыканием (https://javascript.ru/forum/events/79134-sdelat-obrabotchik-klikov-s-zamykaniem.html)

Сделать обработчик кликов с замыканием

нужна помощь новичку))
подскажите как реализовать:
"ну жен обработчик для кнопок и считаем количество этих
кликов по каждой кнопке, выводя результат в саму кнопку, т.е. как
текстовое значение кнопки. Количество нажатий для каждой кнопки должно
хранится в замыкании, т.е. должна быть только одна функция подсчета
кликов, но использоваться для любого количества кнопок (подразумевается,
что кнопок может быть как одна, так и пара сотен...)."

ps есть пример на learn.js но не понимаю как в innerHTML самой кнопки засунуть результат счетчика.

gunner17,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  .btn:after{
      content: attr(num);
      margin-left: 3px;
      }



  </style>

  <script>
document.addEventListener("click", function(event) {
const target = event.target.closest(".btn");
if(target) {
  let num = +target.getAttribute("num") || 0;
  target.setAttribute("num", ++num)
}

});
  </script>
</head>
<body>
<div class="btn">click me!</div>
<div class="btn">click me!</div>
<div class="btn">click me!</div>
</body>
</html>

Цитата:

Сообщение от gunner17

должна быть только одна функция подсчета
кликов, но использоваться для любого количества кнопок (подразумевается,
что кнопок может быть как одна, так и пара сотен...)

Цитата:

Сообщение от gunner17

Количество нажатий для каждой кнопки должно
хранится в замыкании

Например так (переменная реально хранится в замыкании)...

<button is="click-counter"></button>
<button is="click-counter"></button>
<button is="click-counter"></button>

<style>
[is="click-counter"]::before { content: "Click me! "}
</style>

<script>
class ClickCounter extends HTMLButtonElement {
	constructor() {
		super();
		const clickHandler = this.counterClosure;
		this.addEventListener("click", clickHandler);
		clickHandler();
	}
	
	get counterClosure() {
		let counter = 0;
		return () => this.textContent = counter++;
	}
}
customElements.define("click-counter", ClickCounter, { extends: "button" });
</script>

Malleys,
:) :thanks:

Цитата:

Сообщение от Malleys

get counterClosure()

почему используется именно get?

Цитата:

Сообщение от рони

почему используется именно get?

Разницы при выполнении нет — так и так будет возвращена функция, но я думаю, что если напрямую вызывать функцию, то this.counterClosure() лучше, чем this.counterClosure()()

const clickHandler = this.counterClosure; выглядит так, как будто это ссылка на функцию (что в принципе и есть), а без геттера это выглядело бы как присвоение константе результата выполнения функции!

Цитата:

Сообщение от Malleys

this.counterClosure() лучше, чем this.counterClosure()()

не могу уловить мысль ...
чем плох такой вариант?

<button is="click-counter"></button>
<button is="click-counter"></button>
<button is="click-counter"></button>

<style>
[is="click-counter"]::before { content: "Click me! "}
</style>

<script>
class ClickCounter extends HTMLButtonElement {
	constructor() {
		super();
		const clickHandler = this.counterClosure();
		this.addEventListener("click", clickHandler);
		clickHandler();
	}
	
	counterClosure() {
		let counter = 0;
		return () => this.textContent = counter++;
	}
}
customElements.define("click-counter", ClickCounter, { extends: "button" });
</script>