用于计算按钮点击次数的 Javascript 代码答案

【问题标题】：Javascript code to count number of clicks on a button用于计算按钮点击次数的 Javascript 代码
【发布时间】：2014-06-06 06:03:30
【问题描述】：

我有一个页面，我想在其中计算按钮的点击次数。并且数字显示在该按钮的正下方。

我尝试搜索并找到了这个。我认为这不会计算点击总数： Keeping track of number of button clicks

我熟悉 javascript 代码，所以任何帮助都会很有用。

【问题讨论】：

标签： javascript

【解决方案1】：

HTML 代码：

  <button onclick="myFunction()">Try it</button>

JS 代码：

 var inc=0;
 function myFunction() {
    inc=inc+1;
    alert(inc);    
 }

【讨论】：

【解决方案2】：

假设你的 html 是：

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

现在函数是：

   <script>
    var cnt=0;
    function CountFun(){
     cnt=parseInt(cnt)+parseInt(1);
     var divData=document.getElementById("showCount");
     divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited

    }
  </script>

【讨论】：

感谢您的回答。那是有效的。你能帮我多一点吗？我想将文本显示为“下载次数：（数字）”您可以编辑代码以使其如上显示吗？
我在重新加载页面时看到了另一件事，数字消失了。我希望数字始终存在。如果有人从其他位置打开我的网站，点击次数应该在那里。
当你重新加载页面时计数没有。将重置为 0。您无法使用 javascript 实现此目的。您必须使用一些服务器端代码或 cookie

【解决方案3】：

你可以这样做：

  <script>
    var cnt=0;
    function CountFun(){
     cnt++
     var divData=document.getElementById("showCount");
     divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited

    }
  </script>

或者你可以添加事件监听器

documet.getElementById('[id of the button]').addEventListener('click', function(){
         cnt++
         var divData=document.getElementById("showCount");
         divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited
});

【讨论】：

【解决方案4】：

HTML：

 <button id='click-me'>Click me please!!</button>
 <div id='showCount'></div>

JS 代码：

  <script>
      let count = 0;
      let btn = document.querySelector('#click-me');
      let divSection = document.getElementById('showCount');
      btn.addEventListener('click', (e)=>{
        count++;
        divSection.innerHTML=`Number of Clicks are: ${count}`;
     });
  </script>

【讨论】：