Как сделать счетчик для нажатий по кнопке?

Question

[Neizvest]

Нужно сделать счетчик, который записывает и выводит кол-во нажатий по кнопке. К примеру: нажали на кнопку 1 раз, вывели 1, нажали второй раз, вывели 2, нажали 3ий вывели 3, и т.д;

Answer 1

[0xD34F]

<button class="click-count">click me</button>
<button class="click-count">click me</button>
<button class="click-count">click me</button>

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('click-count')) {
    t.innerText = (t.innerText | 0) + 1;
  }
});

// или

const onClick = e => e.target.textContent = -~e.target.textContent;
document.querySelectorAll('.click-count').forEach(n => n.addEventListener('click', onClick));

Answer 2

[Сергей Соколов]

Из HTML элементов понадобится кнопка и место, куда выводить значение. Например, тег <p>
Для счётчика завести переменную. Её значение будет обновляться.
На кнопке слушать событие "click", по нему должна срабатывать функция, которая увеличит значение переменной на 1 и выведет его в HTML элемент.

Как вы начнете выполнять этот план и что именно из этого плана не понятно?

Comments

[Neizvest]

Как сам цикл записать, этот не работает -
var button = document.getElementById("button");

button.addEventListener('click', function(e) {
for (var i = 0;;i++) {

}
document.getElementById("text").innerHTML = i;
});

[Сергей Соколов]

Neizvest, при одном вызове эта функция должна увеличить счётчик только 1 раз на 1.
i надо объявить вне функции, чтобы значение сохранялось между разными вызовами.
Попробуйте так:

var button = document.getElementById("button");
var i = 0; // начальное значение

button.addEventListener('click', function(e) {
	i = i + 1;
  document.getElementById("text").innerHTML = i;
});

[Neizvest]

Спасибо