toggle a random class with jquery

Question

the idea is having a button that, when clicked, adds a random class picking it from an array to another div. what i want is having that same button to remove any randomly added class from it when i re-click it.

here's a fiddle: https://jsfiddle.net/jLmj7bwk/1/

and this is the function

$(".button").click(function() {

    var classes = ['one', 'two', 'three'];
    var randomnumber = Math.floor(Math.random() * classes.length); 

    $(".element").toggleClass(classes[randomnumber]);   

    if  ($(this).text() == "cancel added class")
        $(this).text("add random class")


    else
        $(this).text("cancel added class");

});

this does add a class, but it keeps on adding them without removing it. could you help? thanks a lot!

You are on the right track. You must use toggleClass method that is the most efficient and preferred way and also good practice. Look my solution. — maxspan, Apr 04 '15 at 14:03

Ram · Answer 1 · 2015-04-04T13:36:59.223

You can use removeClass and addClass methods instead of the toggleClass. Array.prototype.join can be used for creating a argument for the removeClass.

$(".element").removeClass(classes.join(' ')) //  'one two three'
             .addClass(classes[randomnumber]);

It seems I hadn't understood the question completely. If the class should be added randomly and on the next click should be removed:

var $e = $(".element");
var classes = ['one', 'two', 'three'];

$(".button").click(function () {
    var random, hasClass;

    hasClass = classes.filter(function(cls) {
        return $e.hasClass(cls);
    }).length;

    if ( hasClass ) {
       $(this).text('add random class');
       $e.removeClass(classes.join(' '));
    } else {
       $(this).text('cancel added class');
       random = Math.floor(Math.random() * classes.length);
       $e.addClass(classes[random]);
    }
});

https://jsfiddle.net/ceLav6d6/

could you integrate this is the fiddle please? not sure where to put it :) thanks — valerio0999, Apr 04 '15 at 13:07

Frayt · Accepted Answer · 2015-04-04T13:07:31.670

How is this?

https://jsfiddle.net/jLmj7bwk/3/

$(".button").click(function() {

var classes = ['one', 'two', 'three'];
var randomnumber = Math.floor(Math.random() * classes.length); 

if($(this).text() === "cancel added class")
{
    $(".element").removeClass(classes.join(' '));
    $(this).text("add random class");
}
else
{
$(".element").addClass(classes[randomnumber]);
$(this).text("cancel added class");
}

});

.removeClass can take multiple classes in a a single call if they are separated by spaces, so if you remove all the classes from the array and then add a random one, it works.

Note that it may sometimes look like the colour didn't change. It did, but due to the array being small, the chance of the colour being the same is high.

sorry this is not working :/ once i re-click it, it should turn back grey. it keeps on adding colors — valerio0999, Apr 04 '15 at 13:07

score 1 · Answer 3 · answered Apr 04 '15 at 13:59

Here is an efficient way of toggling classes as per using toggleClass method.

JSFIDDLE

//Javascript

    var isAddingClass = true;
    var currentClass = '';
    $(".button").click(function () {

        var classes = ['one', 'two', 'three'];
        var randomnumber = Math.floor(Math.random() * classes.length);

        if (currentClass == '') {
            currentClass = classes[randomnumber];
        }
        $(".element").toggleClass(currentClass, isAddingClass);

        if ($(this).text() == "cancel added class") {
            $(this).text("add random class");
            isAddingClass = true;
            currentClass = classes[randomnumber];
        }
        else {
            $(this).text("cancel added class");
            isAddingClass = false;
        }

    });

toggle a random class with jquery

3 Answers3