CODEWITHSUNDEEP
javascriptjquery
John Ayers
John Ayers

Reputation: 519

JQuery Adding a class from a random number

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

Upvotes: 0

Views: 286

Answers (4)

Panos Bariamis
Panos Bariamis

Reputation: 4653

If you debug your code (e.g. 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

Upvotes: 1

Mottie
Mottie

Reputation: 86413

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

Upvotes: 1

Derek Henderson
Derek Henderson

Reputation: 9706

You can't call a setTimeout function like that.

Try

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

Upvotes: 3

nullability
nullability

Reputation: 10675

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.

Upvotes: 0

Related Questions