web-dev-qa-db-ja.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>
javascripthtmlclickcounter
14
Jumpoy

「クリック」変数の生成にはintの代わりにvarを使用し、'click'の代わりに'onClick'を使用しますあなたの関数名：

<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でサポートされています。

また、「クリック」という名前はJavaScriptによって関数名に予約されているため、他のものを使用する必要があります。

32
ReeCube

Wordの「クリック」を関数名として使用しないでください。 JavaScriptの予約キーワードです。以下のコードでは、「クリック」の代わりに「ハロー」機能を使用しました

<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>
6
Sajib

タイプミスのコードを確認した後、更新されたコードを次に示します

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()のような別の名前を指定してください。

2
Dhaval Marthak

このコードを使用して、ボタンのクリック数を取得できます。

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

 }
0
Mitul Panchal
    <!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を使用する必要があります

0
vini