Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2019, 01:00
Новичок на форуме
Отправить личное сообщение для gunner17 Посмотреть профиль Найти все сообщения от gunner17
 
Регистрация: 06.03.2019
Сообщений: 9

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

ps есть пример на learn.js но не понимаю как в innerHTML самой кнопки засунуть результат счетчика.
Ответить с цитированием
  #2 (permalink)  
Старый 23.12.2019, 02:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2019, 08:51
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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>
Ответить с цитированием
  #4 (permalink)  
Старый 23.12.2019, 09:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Malleys,
Ответить с цитированием
  #5 (permalink)  
Старый 23.12.2019, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от Malleys
get counterClosure()
почему используется именно get?
Ответить с цитированием
  #6 (permalink)  
Старый 23.12.2019, 10:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

const clickHandler = this.counterClosure; выглядит так, как будто это ссылка на функцию (что в принципе и есть), а без геттера это выглядело бы как присвоение константе результата выполнения функции!
Ответить с цитированием
  #7 (permalink)  
Старый 23.12.2019, 11:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
Как сделать несколько кликов на кнопку? VaytonJS Javascript под браузер 1 19.11.2018 08:01
Как снять обработчик с очередью FanAizu jQuery 0 11.02.2012 19:28
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 22:55