|
|
23.12.2019, 01:00
|
|
Новичок на форуме
|
|
Регистрация: 06.03.2019
Сообщений: 9
|
|
|
Сделать обработчик кликов с замыканием
нужна помощь новичку))
подскажите как реализовать:
"ну жен обработчик для кнопок и считаем количество этих
кликов по каждой кнопке, выводя результат в саму кнопку, т.е. как
текстовое значение кнопки. Количество нажатий для каждой кнопки должно
хранится в замыкании, т.е. должна быть только одна функция подсчета
кликов, но использоваться для любого количества кнопок (подразумевается,
что кнопок может быть как одна, так и пара сотен...)."
ps есть пример на learn.js но не понимаю как в innerHTML самой кнопки засунуть результат счетчика.
|
|
23.12.2019, 02:23
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
23.12.2019, 08:51
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от 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>
|
|
23.12.2019, 09:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Malleys,
 
|
|
23.12.2019, 09:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Malleys
|
|
get counterClosure()
|
почему используется именно get? |
|
23.12.2019, 10:20
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от рони
|
|
почему используется именно get?
|
Разницы при выполнении нет — так и так будет возвращена функция, но я думаю, что если напрямую вызывать функцию, то this.counterClosure() лучше, чем this.counterClosure()()
const clickHandler = this.counterClosure; выглядит так, как будто это ссылка на функцию (что в принципе и есть), а без геттера это выглядело бы как присвоение константе результата выполнения функции! |
|
23.12.2019, 11:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от 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>
|
|
|
|
