CODEWITHSUNDEEP
javascriptjquerycounter
user4444870
user4444870

Reputation:

Writing a counter to count the number of clicks

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();

Upvotes: 1

Views: 1302

Answers (6)

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

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" />

Upvotes: 0

Caibao Kuang
Caibao Kuang

Reputation: 47

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);
})()

Upvotes: 0

Raptor
Raptor

Reputation: 54212

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.

Upvotes: 0

Jerry Ni
Jerry Ni

Reputation: 531

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();

Upvotes: 0

Kirill Pisarev
Kirill Pisarev

Reputation: 843

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);
    });
})();

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

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--);
});

Upvotes: 2

Related Questions