JQuery Adding a class from a random number

Question

Im trying to add a class to a specific id tag in my code. The class is kb1, kb2, kb3, or kb4. I want the JavaScript to pick a random number between 1 and 4 then apply that to the class to have it randomly add a class.

All of this is done in a loop so that it will constantly add and remove classes every 30 seconds.

EDIT: My apologies, i was trying to explain my problem and didnt add a question. For some reason when this runs nothing happens. No classes are added. Can you add classes based on random numbers, and if so why isnt what im trying to do working properly?

$(document).ready(function() {
 function kbadd() {
  number = 1 + Math.floor(Math.random() * 4);  
   $("#kb1").addClass("kb"+number);
   $("#kb2").addClass("kb"+number);
   $("#kb3").addClass("kb"+number);
   $("#kb4").addClass("kb"+number);
   timeoutID = window.setTimeout(kbremove(number), 30000);
   }
 function kbremove(number) {
  $("#kb1").removeClass("kb"+number);
  $("#kb2").removeClass("kb"+number);
  $("#kb3").removeClass("kb"+number);
  $("#kb4").removeClass("kb"+number);
  timeoutID = window.setTimeout(kbadd, 1);
  }
kbadd();
});

Answer 1

You can't call a setTimeout function like that.

Try

timeoutID = window.setTimeout(function () {
    kbremove(number);
}, 30000);

Answer 2

Try wrapping the functions within the setTimeout in a function ( demo ):

$(function () {
    function kbadd() {
        var number = 1 + Math.floor(Math.random() * 4);
        $("#kb1, #kb2, #kb3, #kb4").addClass("kb" + number);
        window.setTimeout(function() { kbremove(number) }, 30000);
    }

    function kbremove(number) {
        $("#kb1, #kb2, #kb3, #kb4").removeClass("kb" + number);
        kbadd();
    }
    kbadd();
});

Answer 3

If you debug your code (eg with firebug) you will see the message Error: useless setTimeout call (missing quotes around argument?) . That means that you have to use a function in setTimeout .

Replace

timeoutID = window.setTimeout(kbremove(number), 30000);

with

timeoutID = window.setTimeout(function() {kbremove(number);}, 30000);

An easiest way to write your script is

function kbadd() {
    number = 1 + Math.floor(Math.random() * 4);  
    $('#kb1, #kb2, #kb3, #kb4').addClass('kb' + number);
    window.setTimeout(function() { kbremove(number); }, 30000);
}

function kbremove(number) {
    $('#kb1, #kb2, #kb3, #kb4').removeClass('kb' + number);
    window.setTimeout(kbadd, 1);
}

$(document).ready(kbadd);

see here

Answer 4

You are defining your functions inside of an anonymous function. Therefore kbadd and kbremove do not exist in the global scope when your setTimeout is called.

Try moving your function definitions outside of your $(document).ready() function, like this:

function kbadd() {
    var number = 1 + Math.floor(Math.random() * 4);  
    $("#kb1").addClass("kb"+number);
    $("#kb2").addClass("kb"+number);
    $("#kb3").addClass("kb"+number);
    $("#kb4").addClass("kb"+number);
    timeoutID = window.setTimeout(function() { kbremove(number); }, 30000);
}
function kbremove(number) {
    $("#kb1").removeClass("kb"+number);
    $("#kb2").removeClass("kb"+number);
    $("#kb3").removeClass("kb"+number);
    $("#kb4").removeClass("kb"+number);
    timeoutID = window.setTimeout(kbadd, 1);
}

$(document).ready(function() {
    kbadd();
});

Also there is an issue with some of your setTimeout calls. I think you can actually do this in one function with some refactoring.