跟踪并显示用户点击我网站上的按钮的次数答案

【问题标题】：Track and display how many times users have clicked a button on my website跟踪并显示用户点击我网站上的按钮的次数
【发布时间】：2017-09-26 04:07:35
【问题描述】：

我试图找出一种方法来跟踪用户点击我网站上的按钮的次数，因此只需在每次点击的总数中添加 1 即可。

我只是不确定如何存储和访问这个号码。新的 html 和 javascript 所以请保持简单，谢谢！

【问题讨论】：

你做了什么吗，一个html标签？支持页面的脚本？有什么事吗？

标签： javascript jquery html server

【解决方案1】：

如果您的 HTML 是：

<div id="showCount"></div>
<input type="button" id="btnClick" value="Click me" onclick="CountFun();/>

现在要计算的函数是：

var cnt=0;
function CountFun(){
 cnt=parseInt(cnt)+parseInt(1);
 var divData=document.getElementById("showCount");
 divData.innerHTML="Number of Clicks: ("+cnt +")";

}

【讨论】：

这不会在服务器端存储它，对吧？我希望能够统计每个点击按钮的用户并显示总和。
这不会存储在服务器端。点击次数会显示按钮被点击的次数。

【解决方案2】：

使用 HTML5 数据属性将计数存储为按钮的属性，而不仅仅是全局变量，并在每次点击时递增计数/更新数据计数。

另一个客户端解决方案是使用本地/会话存储来存储计数。

请注意，如果您想要一个服务器端解决方案并且可以访问它 - 您需要使用 php 或类似工具并将数据保存到数据库中。

$(document).ready(function(){
  $('#clicker').click(function(){
    var count = parseInt($(this).attr('data-count')) + 1;
    $('#clickedNum').text('The button was clicked ' + count + ' times');
    $('#clicker').attr('data-count', count);
   });
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="button" id="clicker" data-count='0'>Click Me</button>
<p id="clickedNum"></p>

【讨论】：

【解决方案3】：

可以监听对应按钮的点击并保存。

<button name="button" >Click Me</button>

var ele = document.getElementsByTagName('button');
     var numOfClick = 0;
     ele[0].addEventListener('click', function() {
      numOfClick = numOfClick + 1;
    });

【讨论】：

【解决方案4】：

<script type="text/javascript">
    jQuery(document).ready(function($){
        $(this).click(function(){
             /** Perform Operations Here To Save Click Count **/             
        });
    });
</script>

【讨论】：