Writing a counter to count the number of clicks

Question

I have two buttons on my website. Next and previous. I want to write a code to increase the value each time next is clicked and decrease the value each time previous is clicked. I want the value to be shown in an input. But the value shown in input is always 0 and does not change with clicks.

Here is my code:

function count(){
    var $counter=0;
    $(".next-button").click(function() {
         $counter=$counter+1;
    });
    $(".previous").click(function() {
        $counter=$counter-1;
    });
    return $counter;
}

document.getElementById('counter').value =count();

It's because the `count()` always reset `$counter` to 0 . Plus, Javascript is not PHP. no `$` sign is needed. — Raptor, Jan 28 '15 at 07:43

score 2 · Answer 1 · answered Jan 28 '15 at 07:43

You don't need return in this function. In fact, you don't need a function at all. Instead, show the counter whenever you update it.

var $counter=0;
$(".next-button").click(function() {
     $('#counter').val($counter++);
});
$(".previous").click(function() {
    $('#counter').val($counter--);
});

score 0 · Answer 2 · answered Jan 28 '15 at 07:44

you should update value in element each time it changes:

(function count(){
    var counter=0,
        $container = $('#counter');
    $(".next-button").click(function() {
        $container.text(++counter);
    });
    $(".previous").click(function() {
        $container.text(--counter);
    });
})();

Swapnil Motewar · Answer 3 · 2015-01-28T07:59:03.653

0

Declare counter globally so it will initialized only once

var $counter=0;
  var count=document.getElementById('counter');
     $(".next").click(function() {
          count.value=++$counter;
     });
     $(".pre").click(function() {
         count.value=--$counter;
         
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="next">next</button>
 <button class="pre">pre</button>
 <input type="text" id="counter" value="0" />

edited Jan 28 '15 at 07:59

answered Jan 28 '15 at 07:44

Swapnil Motewar

1,080
6
12

why nest the click function inside the `count()` ? that doesn't sound correct. – Raptor Jan 28 '15 at 07:47

score 0 · Answer 4 · edited May 23 '17 at 11:43

Your codes contain multiple errors. You reset the variable to 0 in your count() function, and put the click() function within the function.

var counter=0;
function count(){
    return counter;
}

$(".next-button").click(function() {
    counter = counter+1;
});
$(".previous").click(function() {
    counter = counter-1;
});

$('#counter').val(count());
// or 
$('#counter').val(counter);

I assume $('#counter') is a input text box.

p.s. Variable doesn't require to prefix with $. Extended reading about this Hungarian notation: when to use, when not to.

score 0 · Accepted Answer · answered Jan 28 '15 at 07:47

0

You can do like this:

var $counter = 0;

$(".next-button").click(function() {
    $counter = $counter + 1;
    refreshCount();
});
$(".previous").click(function() {
    $counter = $counter - 1;
    refreshCount();
});

function refreshCount() {
    document.getElementById('counter').value = $counter;
}

//init
refreshCount();

answered Jan 28 '15 at 07:47

Jerry Ni

521
6
7

1

not suggested to mix traditional Javascript DOM with jQuery objects, but the codes are still valid. – Raptor Jan 28 '15 at 08:07
@Raptor Yes. use this: `$('#counter').val( $counter );` better ~ – Jerry Ni Jan 28 '15 at 08:16

score 0 · Answer 6 · answered Jan 28 '15 at 07:57

First, your assign expression is run count function actually.

document.getElementById('counter').value =count();

The count function return 0.

(function() {
  var $counter = 0;

  var add = function() {
    $counter ++;
    setCounterValue();
  }

  var del = function() {
    $counter --;
    setCounterValue();  
  }

  var setCounterValue = function() {
    document.getElementById('counter').value = $counter;        
  }

  $(".next-button").bind("click", add);

  $(".previous").bind("click", del);
})()

Writing a counter to count the number of clicks

6 Answers6