How do i toggle between classes of an element using javascript?

Question

I am trying to make a script that sets a class for the label of a checkbox when i click it once and when i click it again it reverts to the first class.

This is the code i have:

    <label for="img1">
    <img class="img1" src="Images/testimg.jpg" onclick="javascript:test()" id="t1" />
    </label>

    <input type="checkbox" class="chk " id="img1" name="img1" value="1" />

I want the test function to assign the class img2 when it is called and when i call it again to assign the class img1.

Do you need to replace current classes (a trivial task) or add a new one (not difficult, but requires a helper function)? — Álvaro González, May 08 '13 at 14:56
For your entertainment, a Stack Overflow classic: [Not enough jQuery](http://meta.stackexchange.com/a/48195/141539). — Álvaro González, May 08 '13 at 14:58
Perhaps you can use this: document.getElementById("MyElement").classList.toggle('MyClass'); — ferralucho, Feb 22 '18 at 12:41

flavian · Answer 1 · 2013-05-08T15:03:27.033

4

JavaScript

function toggleClass(element, origin, target) {
    var newClass = element.className.split(" ");
    for (var i = 0, i < newClass.length; i++) {
        if (origin.localeCompare(newClass[i]) == 0) {
            newClass[i] = target;
        };
    };
    element.className = newClass.join(" ");
};
// Usage
var img = document.getElementById("img1");
toggleClass(img, "img1 img2");

jQuery

$("#img1").toggleClass("img1 img2");

More here.

edited May 08 '13 at 15:03

answered May 08 '13 at 14:50

flavian

28,161
11
65
105

7

he said javascript, not jquery – Sebas May 08 '13 at 14:51
2

Don't you mean `.toggleClass("img1 img2");`? – gen_Eric May 08 '13 at 14:51
@RocketHazmat Good catch.. @alex23: update your question accordingly: http://api.jquery.com/toggleClass/#toggleClass-className `One or more class names (separated by spaces)...` – ddavison May 08 '13 at 15:00

score 2 · Answer 2 · edited May 23 '17 at 11:58

2

function test() {
    t1.className = t1.className == 'img1' ? 'img2' : 'img1';
}

Related: Change an element's class with JavaScript

edited May 23 '17 at 11:58

Community

1
1

answered May 08 '13 at 14:52

Sebas

21,192
9
55
109

This is ok I suppose, `t1.className = t1.className == t1.className.indexOf('img1') > -1 ? t1.className.replace('img1','img2') : t1.className.replace('img2','img1')';` – Mr_Green May 08 '13 at 15:00
1

that also won't work. if you had 'img10' as a classname then you'd end up with 'img20' after the swap, which isn't what you want. – Herms May 08 '13 at 15:01
1

I would say _duplicate_ rather than _related_. – Xavi López May 08 '13 at 15:01
@alex23, unless specified differently, assumed single classed dom element. I'm personnally pulling the chariot because I want to, not only because of the carrot. – Sebas May 08 '13 at 15:02
2

@XaviLópez, right, depends on your morning mood :D – Sebas May 08 '13 at 15:02
`t1.className = /(^|\s)img1($|\s)/g.test(t1.className) ? t1.className.replace(/(^|\s)img1($|\s)/g, 'img2') : t1.className.replace(/(^|\s)img2($|\s)/g, 'img1');` This is working fine :). Need optimization though. and even I think it is not good to go with regex here, I suppose. – Mr_Green May 08 '13 at 15:11

score 0 · Answer 3 · answered May 08 '13 at 14:56

If you are not using jQuery I will suggest you 2 things:

With onclick property, you don't need to set javascript: before calling a function. It will not work if you use it.
You can send the element through the function like this: onclick=test(this). Now you will only have to compare his class.

function testFunction(element) {
    if (element.className === 'img1') {
        element.className = 'img2';
    } else {
        element.className = 'img1';
    }
}

TAKE CARE if you use multiclasses, because you will need to add them into the classname. This function will remove full class name for the new one.

score -1 · Answer 4 · answered May 08 '13 at 14:56

-1

You could use JQuery's toggleClass method:

function toggler() {
    $('#t1').toggleClass('img2 img1')

}

answered May 08 '13 at 14:56

Scott Weaver

7,192
2
31
43

downvoters should consult http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question/48195#48195 – Scott Weaver May 08 '13 at 18:00

How do i toggle between classes of an element using javascript?

4 Answers4