HTML/Javascript 按钮点击计数器

Question

HTML/Javascript 按钮点击计数器

24

我之前做过类似的事情，我知道这很接近。我只是想让我的按钮增加JavaScript变量，然后该函数显示新值。

<html>
<head>
    <title>Space Clicker</title>
</head>

<body>
    <script type="text/javascript">
    int clicks = 0;
    function click() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onClick="click()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

- Jumpoy

我认为 int clicks 的值始终为 0，因为在增加之前你没有从屏幕获取该值。 - mmeasor

@DhavalMarthak 但在这种情况下，他适当地使用了 getElementById()。 - Monacraft

@Monacraft 刚刚编辑过 :) - Dhaval Marthak

5个回答

10

不要使用“click”作为函数名称，因为它是JavaScript中的保留关键字。在下面的代码中，我使用了“hello”函数代替“click”。

<html>
<head>
    <title>Space Clicker</title>
</head>

<body>
    <script type="text/javascript">

    var clicks = 0;
    function hello() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onclick="hello()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

- Sajib

2

在查看了你的代码后发现有一些打字错误，这里是更新后的代码

var clicks = 0; // should be var not int
    function clickME() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks; //getElementById() not getElementByID() Which you corrected in edit
 }

演示

注意: 不要使用内置的处理程序，因为 .click() 是javascript函数，尝试给它一个不同的名称，比如 clickME()

- Dhaval Marthak

谢谢，我很确定是变量解决了这个问题。 - Jumpoy

函数的名称和getElementById中的拼写错误。 - Werner

@Jumpoy 不，你应该将 click() 重命名为 someOther() :) - Dhaval Marthak

1

通过这段代码，您可以获取按钮的点击次数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
    <script src="js/button.js" type="text/javascript"></script>

    <button id="btn" class="btnst" onclick="myFunction()">0</button>
</body>
</html>
 ----------JAVASCRIPT----------
let count = 0;
function myFunction() {
  count+=1;
  document.getElementById("btn").innerHTML = count;

 }

- Mitul Panchal

0

    <!DOCTYPE html>
<html>
<head>
<script>
     var clicks = 0;
    function myFunction() {

        clicks += 1;
        document.getElementById("demo").innerHTML = clicks;


    }
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

</body>
</html>

这应该适用于您 :) 是的，应该使用var

- vini

这真是太聪明了 - 我正在尝试制作一个投票计数器，这个方法非常出色（我只需要添加一行代码来禁用点击后的使用）。 - monkey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ReeCube · Accepted Answer

使用 var 替代 int 来生成您的 clicks 变量，并将函数名称从 click 更改为 onClick:

var clicks = 0;

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

<button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

在JavaScript中，变量是使用var关键字声明的。没有像int、bool、string等标签来声明变量。你可以通过'typeof(yourvariable)'获取变量的类型，更多关于此的支持信息可以在Google上找到。

'click'这个名称被JavaScript保留给函数名，所以你必须使用其他名称。