jquery - JavaScript- count how many times button is cliked - Stack Overflow

admin管理员组

文章数量:1336289

I want to count how many times only 1 specified button is clicked. In my code I have 8 buttons and in p element is shown the number every time I click any other button.

Can you please help me with this?

I want to count how many times only 1 specified button is clicked. In my code I have 8 buttons and in p element is shown the number every time I click any other button.

http://prntscr./jg26mk

Can you please help me with this?

• javascript
• jquery
• html

Share Improve this question Follow edited May 10, 2018 at 10:40 Gogol 3,07044 gold badges3232 silver badges6161 bronze badges asked May 10, 2018 at 10:38 Ana KitanovskaAna Kitanovska 2111 gold badge11 silver badge11 bronze badge 3

• 6 Wele to Stack Overflow!The way SO works, your whole question (including any necessary code) has to be in your question, not just linked. Two reasons: People shouldn't have to go off-site to help you; and links rot, making the question and its answers useless to people in the future. Please put a minimal reproducible example in the question. More: How do I ask a good question? – T.J. Crowder Commented May 10, 2018 at 10:40
• 1 Separately: Don't post pictures of code or other text, post the text itself (marked up as code if it's code). More: meta.stackoverflow./q/285551/157247 – T.J. Crowder Commented May 10, 2018 at 10:41
• set ids and specific counters for each button, and on click of each button with specific id, increase that particular counter only and display it. – Mohd Tabish Baig Commented May 10, 2018 at 10:43

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 1

You can assign an ID to the specified button, then in jQuery use $('#id') instead of $('button')

May be this is what you are looking for.

var count=0;
$(".mySpecialButtons").click(function (){ count++; });
// call this function to show click counts!
function showClicks(){
        alert(count);
}

Easiest way:

<button onclick="myFunction()">Click</button>
<p id="demo"></p>

<script>
var count = 0;
function myFunction() {
  document.getElementById("demo").innerHTML = count++;
}
</script>

Example

You can iterate each button, create counter variable that can only be accessible by the button and increment it on click.

$('button').each( function(){
  var counter = 0;
  
  $( this ).click( function(){
    counter++;
    alert( this.innerText + ' has been clicked ' + counter + ' times' );
  } );
} )

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button A</button>
<button>Button B</button>
<button>Button C</button>

Give your special button an id and use it on click event. Like this:

var count = 0;
$("button#special").on('click', function() {
  count ++;
  $("p").text(count);
});

$("p").text(count);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Send</button>
<button id="special">Click Me to count</button>
<br />
<button>Send</button>
<button>Click</button>
<br />
<button>Send</button>
<button>Click</button>
<br />
<button>Send</button>
<button>Click</button>
<br />
<p></p>

try this

<button type="button" id="SomeID">Countable button</button>
<button type="button" >Unountable button</button>
<button type="button" >Unountable button</button>


<script>
    var count = 0;
    $('body').on('click', '#SomeID', function () {
        count++;
        $("p").text("Number of Count is " + count)
    });
</script>

A closure should do the trick, as described in this article. So, there is no need to define a global variable to count clicks and pollute the global namespace.

element.onclick = (function outer() {
    let counter = 0;
    return function inner() {
        counter++;
        console.log('ID:' + element.id + 'Number of clicks: ' + counter);
    };
})();

The counter variable will be unique for every button, so you will have information for each button how many times it was clicked.

本文标签： jqueryJavaScript count how many times button is clikedStack Overflow