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

Did you ever declare number? Are there any errors in the console? — tymeJV
– tymeJV, Commented May 9, 2013 at 14:27

Derek Henderson · Accepted Answer · 2013-05-09 14:33:19Z

3

You can't call a setTimeout function like that.

Try

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

answered May 9, 2013 at 14:33

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mottie · Accepted Answer · 2013-05-09 14:34:12Z

1

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

answered May 9, 2013 at 14:34

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

1 Comment

John Ayers Over a year ago

Thank you very much. That was exactly the problem.

Panos Bariamis · Accepted Answer · 2013-05-09 14:47:19Z

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

nullability · Accepted Answer · 2013-05-09 14:33:02Z

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.

Collectives™ on Stack Overflow

JQuery Adding a class from a random number

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related