HTML/Javascript 按钮点击计数器答案

【问题标题】：HTML/Javascript Button Click CounterHTML/Javascript 按钮点击计数器
【发布时间】：2014-03-14 10:43:19
【问题描述】：

我以前做过类似的事情，我知道这真的很接近。我只是想让我的按钮增加 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>

【问题讨论】：

我认为 int clicks 的值始终为 0，在递增之前您没有从屏幕获取值
@DhavalMarthak 但在这种情况下，他适当地使用了getElementById()。
@Monacraft 刚刚编辑 :)

标签： javascript html click counter

【解决方案1】：

使用var 代替int 生成clicks 变量，使用onClick 代替click 作为函数名称：

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 上找到更多支持。

JavaScript 为函数名称保留了名称“click”，因此您必须使用其他名称。

【讨论】：

至少提供一个更好的解释，否则很好的答案：+1。
感谢您的帮助。

【解决方案2】：

不要使用“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>

【讨论】：

【解决方案3】：

查看有错别字的代码后，这是更新后的代码

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
 }

Demo

注意：不要使用内置处理程序，因为 .click() 是 javascript 函数，请尝试使用不同的名称，例如 clickME()

【讨论】：

谢谢，我很确定是 var 修复了它。
还有函数名和getElementById中的错字
@Jumpoy 不，您应该将 click() 重命名为 someOther() :)

【解决方案4】：

    <!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 应该被使用

【讨论】：

这真是个天才——我试图制作一个投票计数器，而且效果很好（我需要添加的只是在点击后禁用使用）。

【解决方案5】：

通过此代码，您可以获得按钮的点击次数。

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

 }

【讨论】：