Отображение количества кликов в JavaScript до подсчета

Question

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

<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("counter").innerHTML = localStorage.clickcount;
  } else {
    document.getElementById("counter").innerHTML = "Your browser does not support web storage...";
  }
}
</script>

HTML:

<img id="heart" src="../assets/images/redheart.png" title="Give Love!" onclick="clickCounter()"><p id="counter"></p>

Он работает нормально, но я хотел бы иметь возможность отображать количество до щелчка. Прямо сейчас счетчик отображается только после нажатия кнопки изображения.

Спасибо за любой вклад.

Answer 1

Если это не то, что вы собираетесь, пожалуйста, дайте мне знать.

Сначала несколько твиков:

• По причинам доступности:

  • Я сделал <img> <button> (с фоновым изображением). Кнопки очень доступны и удобны для клавиатуры (вкладка, клавиша ввода и т. Д.)
  • Добавил aria-label на кнопку, так как она не содержит текстового содержимого

• Убрал немного JavaScript.

Поведение:

На первой странице загрузки...

Затем мы выполняем пять кликов с последующим обновлением страницы.

Примечание: эта демонстрация не будет работать здесь при переполнении стека из-за ограничений безопасности в редакторе. Посмотрите на созданную мной скрипку.

document.querySelector("button").addEventListener("click", clickCounter);
document.addEventListener("DOMContentLoaded", showValue);

let counter = document.getElementById("counter");

function showValue() {
  counter.innerHTML = `Current count = ${localStorage.clickcount || 0}`;
}

function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    showValue();
  } else {
    counter.innerHTML = "Your browser does not support web storage...";
  }
}

button {
  background-image: url(http://icons.iconarchive.com/icons/benzlee/free-christmas/512/heart-icon.png);
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-color: transparent;
  border: none;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;
}

<button title="Give Love!" aria-label="Give Love!">
<div id="counter"></div>

https://jsfiddle.net/mgejhcnf/3/