Incrementing value based on number of clicks

Question

Objective

• In the first function countCorrect I'm trying to increment the count based on the number of times a user clicks on a button with a class of is-correct
• The end goal is to pass the value of count to the second function changeTotalCorrect in order to update the HTML on the page

Problem

• When click a button with a correct answer and the value of count logged to the console is 0, when I expect an integer between 1-10.

scripts.js

function countCorrect() {
    var count = 0;

    $(".is-correct").on("click", function(){
        count = count++;
        console.log("Answer is correct.");
        console.log(count); // Expect an integer from 1-10
    });

    return count;
}

function changeTotalCorrect(func) {
    var count = countCorrect(); // Expect an integer from 1-10
    $(".highlight").html(count); // Change the HTML to reflect the new number
}

changeTotalCorrect();

index.html

<div class="buttons">
                    <button class="btn btn--option btn--one is-correct">${{ content.price_correct|int }}</button>
                    <button class="btn btn--option btn--two">${{ content.price_incorrect_one|int }}</button>
                    <button class="btn btn--option btn--three">${{ content.price_incorrect_two|int }}</button>
                    <button class="btn btn--option btn--four">${{ content.price_incorrect_three|int }}</button>
                </div>

Answer 1

Here you go with a solution using jQuery https://jsfiddle.net/jeogdzh7/

var cnt = 0;

$('button').each(function(){
   $(this).attr('cnt', cnt);
})

$('button').click(function(){
   if($(this).hasClass('is-correct')){
      $(this).html( "Count " + (parseInt($(this).attr('cnt')) + 1 ));
      $(this).attr('cnt', (parseInt($(this).attr('cnt')) + 1));
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <button class="btn btn--option btn--one is-correct">Count 0</button>
  <button class="btn btn--option btn--two">Count 0</button>
  <button class="btn btn--option btn--three">Count 0</button>
  <button class="btn btn--option btn--four">Count 0</button>
</div>

I'm using attribute to store the count of click. .hasClass is being used for checking the class present in button.

Rather than having two individual function to update the count, I've done it using within click function.

Updated Code

$('button').click(function(){
   if($(this).hasClass('is-correct')){
      $(this)
        .attr('cnt', (parseInt($(this).attr('cnt')) + 1))
        .html( "Count " + $(this).attr('cnt'));
   }
 });

Hope this will help you.

Answer 2

You have to put the click listener outside of the function like this:

var count = 0;

$(".is-correct").on("click", function(){
    count++;
    console.log("Answer is correct.");
    console.log(count); // Expect an integer from 1-10
    changeTotalCorrect();
});


function changeTotalCorrect(func) {
    $(".highlight").html(count); // Change the HTML to reflect the new number
}

changeTotalCorrect();

var count = 0;

$(".is-correct").on("click", function(){
    count++;
    console.log("Answer is correct.");
    console.log(count); // Expect an integer from 1-10
    changeTotalCorrect();
});


function changeTotalCorrect(func) {
    $(".highlight").html(count); // Change the HTML to reflect the new number
}

changeTotalCorrect();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
                    <button class="btn btn--option btn--one is-correct">${{ content.price_correct|int }}</button>
                    <button class="btn btn--option btn--two">${{ content.price_incorrect_one|int }}</button>
                    <button class="btn btn--option btn--three">${{ content.price_incorrect_two|int }}</button>
                    <button class="btn btn--option btn--four">${{ content.price_incorrect_three|int }}</button>
                </div>

Answer 3

The problem is

count = count++;

It should be:

count++;

Using the ++ operator after a variable works by evaluating to the current value (0 in this case) and then incrementing the value stored in the variable. It's the evaluated value (0) that you were incorrectly assigning back to the variable.