using OOP on .click function in javascript

Question

I am making a webpage that has a baseball strikezone with 25 buttons that will be clickable in 25 locations. I need to know if there is a easier way to do this then what I am doing. Maybe something that will take up far less lines. The button is clicked and then the counter is added by one to another table.

$('#one').click(function(){
    counter++;
        $('#ones').text(counter);

     });
     var countertwo = 0;
     $('#two').click(function(){
     countertwo ++;
     $('#twos').text(countertwo);
     });

We need a lot more detail about the problem in order to usefully help. Showing the HTML would help, for instance, along with a clearer explanation of what #one and #ones and such are. — T.J. Crowder
– T.J. Crowder, Commented Sep 5, 2016 at 17:11

T.J. Crowder · Accepted Answer · 2016-09-05 17:15:41Z

A bit of a guess here, but:

You can store the counter on the button itself.
If you do, and you give the buttons a common class (or some other way to group them), you can have one click handler handle all of them.
You can probably find the other element that you're updating using a structural CSS query rather than id values.

But relying on those ID values:

$(".the-common-class").click(function() {
    // Get a jQuery wrapper for this element.
    var $this = $(this);

    // Get its counter, if it has one, or 0 if it doesn't, and add one to it
    var counter = ($this.data("counter") || 0) + 1;

    // Store the result
    $this.data("counter", counter);

    // Show that in the other element, basing the ID of what we look for
    // on this element's ID plus "s"
    $("#" + this.id + "s").text(counter);
});

That last bit, relating the elements by ID naming convention, is the weakest bit and could almost certainly be made much better with more information about your structure.

Mikhail Lipilin · Accepted Answer · 2016-09-05 17:21:55Z

1

You can use something like this:

<button class="button" data-location="ones">One</button>
...
<button class="button" data-location="twenties">Twenty</button>

<div id="ones" class="location">0</div>
...
<div id="twenties" class="location">0</div>

$('.button').on('click', function() {
  var locationId = $(this).data('location')
    , $location = $('#' + locationId);

  $location.text(parseInt($location.text()) + 1);
});

Also see this code on JsFiddle

answered Sep 5, 2016 at 17:21

Mikhail Lipilin

697 bronze badges

3 Comments

Tidesglenn Over a year ago

this is literally exactly what I was looking for thanks you very much

T.J. Crowder Over a year ago

FWIW, data is not an accessor function for data-* attributes, it does both more and less than that. Unless you need the data features, use .attr("data-location") instead. (Also not a fan of storing data in the UI rather than just having the UI reflect the data, but that's a design call and people go both ways.)

Mikhail Lipilin Over a year ago

You can use either .attr('data-location') or .data('location'), they are both working. But I agree with you, .attr is more preferred way.

score 0 · Accepted Answer · 2016-09-05 21:27:31Z

0

More clean solution with automatic counter

/* JS */

$(function() {
  var $buttons = $('.withCounter'),
      counters = [];
  
  function increaseCounter() {
    var whichCounter = $buttons.index(this)+1;
    counters[whichCounter] = counters[whichCounter] ? counters[whichCounter] += 1 : 1;
    $("#counter"+whichCounter).text(counters[whichCounter]);
  }
  
  $buttons.click(increaseCounter);
});

<!-- HTML -->

<button class="withCounter">One</button>
<button class="withCounter">Two</button>
<button class="withCounter">Three</button>
<button class="withCounter">Four</button>

<p id="counter1">0</p>
<p id="counter2">0</p>
<p id="counter3">0</p>
<p id="counter4">0</p>

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

edited Sep 5, 2016 at 21:27

answered Sep 5, 2016 at 17:34

user6748331

Collectives™ on Stack Overflow

using OOP on .click function in javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related