Question

您好我的代码遇到了问题。这是建立在JavaScript和节点上的。我想在每次点击我的网站www.groupwrites.com上的故事按钮时查看计数，这是我到目前为止的代码。

var clicks = 0;

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};

<div class="media-box-footer">
  <div class="media-box-categories">
    <i class="fa fa-eye"></i> <span id="clicks">0</span>
  </div>

  <p><a href="/stories/<%= story._id %>" type="button" onClick="onClick()" class="btn" role="button">Read</a>

一切都很好。我点击了阅读按钮，（这将我带到另一页）但是当我回来时，计数器仍然是0.任何帮助都会令人惊讶，因为我现在被困住了。谢谢。

Answer 1

当你退出页面时，你的javascript变量不会保持其范围和值，这就是你正在做的事情。

如果您在新标签页中打开该页面，我们会在下面的更新中看到它 - 添加target="_blank"

但是，如果要保持一段时间内的值，则需要一个数据存储来存储该值，例如数据库。

＆＃13;

var clicks = 0;

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};

＆＃13;

<div class="media-box-footer">
  <div class="media-box-categories">
    <i class="fa fa-eye"></i> <span id="clicks">0</span>
  </div>

  <p><a href="/stories/<%= story._id %>" target="_blank" type="button" onClick="onClick()" class="btn" role="button">Read</a>

＆＃13;

Answer 2

如果要在用户计算机（浏览器）上本地存储计数器的状态，可以使用任何可用的本地数据存储，例如localStorage。

根据规范，此代码应该按照您的意愿工作。

<script type="text/javascript">
var clicks = 0;
window.onload = function() {
    var counterNow = localStorage.getItem('counter') || 0;
    document.getElementById("clicks").innerHTML = counterNow;
}
function onClick(event) {
    var counterNow = localStorage.getItem('counter') || 0;
  counterNow = parseInt(counterNow);
  counterNow++;
    localStorage.setItem('counter', counterNow);
  document.getElementById("clicks").innerHTML = counterNow;
};
</script>
<div class="media-box-footer">
  <div class="media-box-categories">
    <i class="fa fa-eye"></i> <span id="clicks">0</span>
  </div>

<a href="/stories/<%= story._id %>" type="button" onClick="onClick()" class="btn" role="button">Read</a>

如果要将数据存储在来自不同用户的多个页面加载中，则需要将计数器变量存储在服务器上。

无法让我的按钮显示点击次数

2 个答案: