在计数之前显示 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>（带有背景图片）。按钮易于使用且键盘友好（Tab、Enter 键等）
  • 为按钮添加了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/