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
}
注意:不要使用内置处理程序,因为.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使用)