在计数前 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。

行为：

第一页加载时...

然后我们执行五次点击，然后刷新页面。

注意：由于编辑器中的安全限制，此演示无法在 Stack Overflow 上运行。在我创建的 fiddle 中查看。

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/

在计数前 JavaScript 显示点击计数

Display click count in JavaScript before the count

javascript

onclick

click-counting