HTML / Javascript按钮单击计数器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML / Javascript按钮单击计数器相关的知识,希望对你有一定的参考价值。

我之前做过类似的事情,我知道这非常接近。我只是想让它按钮增加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>
答案

对于“点击”变量生成使用var而不是int,使用'onClick'而不是'click'作为函数名称:

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

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

</body></html>

在JavaScript变量中使用'var'标记声明,没有像int,bool,string ...这样的标记来声明变量。您可以使用'typeof(yourvariable)'获取变量的类型,您可以在Google上找到更多支持。

并且“click”这个名称由JavaScript保留用于函数名,因此您必须使用其他任何东西。

另一答案

不要使用“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>
另一答案

看完你有错别字的代码后,这里是更新的代码

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()

另一答案
    <!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应该使用

另一答案

通过此代码,您可以在按钮上获得点击次数。

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

 }

以上是关于HTML / Javascript按钮单击计数器的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript性能优化1——内存管理(JS垃圾回收机制引用计数标记清除标记整理V8分代回收Performance使用)

单击按钮Javascript,HTML时页面重新加载

单击当前按钮时无法设置计数器

如何根据我单击的按钮更改 div 的颜色? ( javascript/css/html 只有没有库)

个人 github 页面上的数据库

如何在 html 网站上使用 javascript 读取和写入另一个文件?