我如何使一个按钮显示它的次数's已在javascript中单击

How do I make a button display the number of times it's been clicked in javascript?

本文关键字:已在 单击 javascript 何使一 按钮 显示      更新时间:2023-09-26

我正在创建一个按钮,每次单击按钮后都需要更新状态栏以显示"You have generated numbers x times",其中x是自页面加载以来单击按钮的次数。I

以下是我到目前为止的全部代码(我正在制作一个随机数生成器):

<!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>

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

您不需要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';
}

演示

这就是你想要的吗?

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
}

演示