Writing a Function that will Keep Track of Button Clicks

Question

I'm trying to display on a button how many times a user has clicked the button. I wanted to do this without writing out a separate function for each button, as I plan to have many buttons.

<button class="itemButton"> Button A <span class="itemCount"> 0 </span> </button>
<button class="itemButton"> Button B <span class="itemCount"> 0 </span> </button>
<button class="itemButton"> Button C <span class="itemCount"> 0 </span> </button>

My approach was to try to access the span via the itemCount class on the button, increment the timesClicked property of that button in the "items" object, and then set the text of the span to that value.

var items = {
    "Button A": {
        timesClicked: 0
    }
    "Button B": {
        timesClicked: 0
    }
    "Button C": {
        timesClicked: 0
    }
}

$('.itemButton').click(function () {
    var itemName = $(this).text();
    items.itemName.timesClicked++;
    $(this).children(".itemCount") = items.itemName.timesClicked;

});

I've read some other questions about tracking button clicks but didn't find any that addressed this situation exactly. I spent a while sifting through the Jquery API and played with a number of different functions, so it's very possible that I'm taking a completely incorrect approach. Thank you for any guidance you can offer.

Answer 1

Firstly, you can use data attributes to identify your buttons more reliably:

<button class="itemButton" data-button="A">
    Button A 
    <span class="itemCount">0</span> 
</button>
<button class="itemButton" data-button="B">
    Button B 
    <span class="itemCount">0</span> 
</button>
<button class="itemButton" data-button="C">
    Button C 
    <span class="itemCount">0</span> 
</button>

Then you can use this to identify each item in the object. Note, you need to use an array index notation when accessing an object property using a variable, and also your object syntax was incorrect.

var items = {
    "A": { timesClicked: 0 },
    "B": { timesClicked: 0 },
    "C": { timesClicked: 0 }
}
$('.itemButton').click(function () {
    var button = $(this).data('button');
    items[button].timesClicked++;
    $(this).children(".itemCount").text(items[button].timesClicked);
});

Example fiddle

Answer 2

If you want to get the property of an object by a variable, you should use brackets:

items[itemName].timesClicked

In your case you're actually looking for a property called itemName of the items variable.

Answer 3

Demo:In Fiddler

Firstly, you missed comma separator in your items - variable. Also, the text in the buttons is your entered text + count of clicks (but keys in items - variable are only text before count, so items.itemText will be always undefined. The best way is to add IDs of the buttons and add these IDs as keys in items - variable. Check my example it's very simple and works as you want.

HTML:

<button class="itemButton" id="btnA"> Button A <span class="itemCount"> 0 </span>     </button>
<button class="itemButton" id="btnB"> Button B <span class="itemCount"> 0 </span> </button>
<button class="itemButton" id="btnC"> Button C <span class="itemCount"> 0 </span> </button>

Javascript:

var items = {
 "btnA": {
    timesClicked: 0
 },
 "btnB": {
    timesClicked: 0
 },
 "btnC": {
     timesClicked: 0
 },
};

$('.itemButton').click(function () {
    var itemId = this.id;
    if(items[itemId] != undefined){
    items[itemId].timesClicked++;
    $(this).children(".itemCount").html(items[itemId].timesClicked);
    }
});

Hope this help you.