如何使按钮显示在javascript中单击的次数？

Question

我正在创建一个按钮，其中每个按钮单击后需要更新状态栏以显示“您已生成数字x次”，其中x是自页面加载以来按钮被单击的次数。 一世

这是我到目前为止的整个代码（我正在制作一个随机数生成器）：

<!DOCTYPE html>
<html>
<body>
    <font face="Times New Roman" style="color:MediumOrchid">
        <h1 align="left"> Play At Your Own Risk! </h1>
    </font>
    <button onclick="randomNum ()"> Please click the button to roll the dice </button>
    <p id="demo"> </p>


    <script>
    function randomNum ()
    {
        var listOfNumbers=[];
        var stringOutput="";
        for (i=0;i<5;i++) {
            listOfNumbers.push(Math.floor(Math.random()*59)+1);
            stringOutput += listOfNumbers[i] + "";
        }
        document.getElementById("demo").innerHTML = stringOutput;
    }
    </script>
</body>
</html>

Answer 1

您可以创建一个全局变量来存储点击次数。 在按钮的事件处理程序中显示当前单击并增加该值。 JQuery是你的朋友:)

Answer 2

你不需要jQuery：

HTML

<button id="button">Clicked 0 times</button>

JS

var count = 0;
var button = document.getElementById('button');

button.onclick = updateStatus;

function updateStatus() {
    button.textContent = 'Clicked ' + ++count + ' times';
}

DEMO

Answer 3

这是你要的吗？

HTML代码：

<button id="btn">click</button>
<p id="num"></p>

JavaScript代码：

var btn = document.getElementById('btn'); //Grabs the button's ID
btn.addEventListener("click", points, false); //Adds an event listener to the button
var counts = 0; // counting starts with 0

function points(num) { // where the magic happens
    counts++; // 0 gets increased by one every time the user clicks
    num = document.getElementById('num');
    num.innerHTML = counts; // displays the numbers
}

DEMO

如何使按钮显示在javascript中单击的次数？

问题描述

3 个解决方案

解决方案1
2 2015-11-23 18:23:56

解决方案2
1 2015-11-23 18:28:14

解决方案3
0 2015-11-23 18:34:25

如何使按钮显示在javascript中单击的次数？

问题描述

3 个解决方案

解决方案1 2 2015-11-23 18:23:56

解决方案2 1 2015-11-23 18:28:14

解决方案3 0 2015-11-23 18:34:25

解决方案1
2 2015-11-23 18:23:56

解决方案2
1 2015-11-23 18:28:14

解决方案3
0 2015-11-23 18:34:25