Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="style1.css">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js" />
</head>
<body>


    <script>
    var intervalId;
    var clicked = 0;
    var buttonID = 0;

    $("button").mousedown(function() {
        consol.log("yes");
        buttonID = $(this).attr('id');
        intervalId = setInterval(dosom, 500);
    }).mouseup(function() {
        clicked = 0;

        clearInterval(intervalId);
    });

    function dosom() {
        clicked += 1;
        $("#demo").html("button: "+buttonID+" clicked : "+clicked);
    }


    </script>
    <div class="cadre">
        <div class="guide1">

            <button id="btn1" class="fa fa-chevron-circle-left fa-4x tai1 btnd "></button>

            <button id="btn2" class="fa fa-chevron-circle-right fa-4x tai1 btng"></button>
        </div>


        <div class="guide2">
            <button id="btn3" class="fa fa-chevron-circle-up fa-4x tai2 btnh"></button>
            <br>
            <button id="btn4" class="fa fa-chevron-circle-down fa-4x tai2 btnb" ></button>
        </div>
    </div>

    <p id="demo"> pp : </p>


</body>
</html>