Jquery - Use Variable Outside Of Function

Question

I've read a bit and tried to figure this out but can't manage to get it to work!

The problem is that first I need to set var count = 0; and then count each time $('.next') is clicked so I can later use it at the bottom of the code and get the end variable progress to be correct.

What am I doing wrong here?

$(document).ready(function () {
 var count = 0;
 $('.next').click(function () {
 var counter = count++;
 $('.question-holder:visible').slideUp().closest('.question-holder').nextAll('.question-holder').eq(0).delay(500).slideDown();
 });
 $('.prev').click(function () {
 $('.question-holder:visible').slideUp().closest('.question-holder').prevAll('.question-holder').eq(0).delay(500).slideDown();
 });
 $('#end').on('click', function () {
 $('.question-holder').slideUp().closest('.question-holder');
 $('#end').remove();
 $('.next').remove();
 $('.prev').remove();
 $('#submit-holder').fadeIn();
 });
 var countQuestions = $('div.question-holder').length;
 var splitCount = 100 / countQuestions;
 var progress = splitCount * counter;
 $("div.bar").css("width", progress + "%");
});

• Suresh Atta: what is the issue now ?
• Denys Séguret: You increment count and you use counter. Don't use the counter variable, it's useless.

Answer 1

Try this:

var count = 0;
$('.next').click(function () {
 count++;

...

var countQuestions = $('div.question-holder').length;
var splitCount = 100 / countQuestions;
var progress = splitCount * count;

Each time the .click() event is triggered, your counter variable is being reinitialised, hence wiping any count you are trying to keep track of.

Just increment the count variable and it'll work nicely.

• Mike Christensen: Also, you'll need to use count below instead of counter
• Mysteryos: That question was just edited.. it was previously 'count' >.<

Answer 2

You can use count var like this -

var progress = splitCount * count;

No need for variable counter here var counter = count++;

You need count++ only in click handler

Edit :

working demo --> http://jsfiddle.net/mohammadAdil/p3PFG/2/

You need to calculate and update your progress bar inside click handler

• Kim: You are a king! Thank you very very much! Really appreciate! :)