web-dev-qa-db-fra.com

Bouton compteur de clic HTML/Javascript

J'ai déjà fait quelque chose de similaire à cela et je sais que c'est très proche. J'essaie simplement de faire en sorte que mon bouton incrémente la variable javascript, puis la fonction affiche la nouvelle valeur.

<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
13
Jumpoy

Utilisez var au lieu de int pour la génération de variable 'clics' et 'onClick' au lieu de 'clic' comme nom de fonction:

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

En JavaScript, les variables sont déclarées avec la balise 'var', il n'y a pas de balises comme int, bool, string ... pour déclarer des variables. Vous pouvez obtenir le type d'une variable avec 'typeof (votre variable)', plus d'informations à ce sujet sur Google.

Et le nom 'click' est réservé par JavaScript à functionnames, vous devez donc utiliser autre chose.

30
ReeCube

N'utilisez pas le mot "clic" comme nom de fonction. C'est un mot clé réservé en JavaScript. Dans le code ci-dessous, j'ai utilisé la fonction "hello" au lieu de "clic"

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

Après avoir examiné le code que vous rencontrez, vous trouverez le code mis à jour.

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
 }

Démo

Note: N'utilisez pas de gestionnaires intégrés, car .click() est une fonction javascript, essayez de donner un nom différent comme clickME()

2
Dhaval Marthak

Grâce à ce code, vous pouvez obtenir le nombre de clics sur un bouton. 

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

Cela devrait fonctionner pour vous :) Oui var devrait être utilisé

0
vini