increase var as number

Question

I got the following code:

window.setInterval(function(){
    var id = $('.slidermenu.currentone').attr('data-id');
    var newid = parseInt(id) + 1;
    //alert(newid + ' - ' + id);

    $('.slidermenu.currentone').animate({backgroundColor: 'white'}, 'slow');
    $('.slidermenu.currentone').removeClass("currentone");
    $('slidermenu[date-id='+newid+']').animate({backgroundColor: '#f3f3f3'}, 'slow');
    $('slidermenu[date-id='+newid+']').addClass("currentone");
    $('#activeimage img.currentone').fadeOut('slow');
    $('#activeimage img.currentone').removeClass("currentone");
    $('#activeimage img[data-id='+newid+']').fadeIn('slow');
    $('#activeimage img[data-id='+newid+']').addClass("currentone");
}, 3000);

I'm trying to make a function which runs each 3 second, and then make my slider show the next image. well, it works pretty good first time it runs. But second time, it just doesn't work.

I think the problem might be with making the var newid have the number of from id, plus 1.

Also, I actually need it to do this up to number 5, and then after that goes down to number 1 again.

http://stackoverflow.com/questions/4862193/javascript-global-variables — Dharman, Jan 13 '13 at 16:54
http://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function — Dharman, Jan 13 '13 at 16:54
You might want to specify the base parameter of `parseInt`: `parseInt(id, 10)`. This might even locate the problem. — Dan D., Jan 13 '13 at 16:55

score 2 · Answer 1 · answered Jan 13 '13 at 17:01

It looks like you are missing the . selector when setting the new slider menu to be the current one. Try this:

$('.slidermenu[date-id='+newid+']').animate({backgroundColor: '#f3f3f3'}, 'slow');
$('.slidermenu[date-id='+newid+']').addClass("currentone");

score 0 · Answer 2 · edited Mar 01 '15 at 23:51

To increment the id, you need to make the id variable outside of the increment function and then increment it each time the interval function is being called. You can make it available from a closure and not have it global, which is usually preferred.

// make an anonymous function which reads the id attr and stores it in the id var.
var intervalFunction = (function(){
var id = $('.slidermenu.currentone').attr('data-id')
  , id = parseInt(id);

// return a function which will be run after every 3s and will increment the id
return function(){
  console.log(id++);
  // your slider code here
}})();

window.setInterval(intervalFunction, 1000);

score 0 · Answer 3 · answered Jan 13 '13 at 17:59

The problem is that each time your interval function runs, it's adding 1 to the value of data-id, which doesn't change. Since you want to loop through 5 values, you need to store your increment in a separate value, outside of the interval function -- using a closure in the following code:

window.setInterval(function() {
  var inc = 0;
  return function() {
    inc = 1 + inc % 5;
    var id = $('.slidermenu.currentone').attr('data-id');
    var newid = parseInt(id) + inc;
    alert(inc);
    // slider code
  }
}(), 3000);

increase var as number

3 Answers3