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

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
– Álvaro González, Commented May 8, 2013 at 14:56
For your entertainment, a Stack Overflow classic: Not enough jQuery. — Álvaro González
– Álvaro González, Commented May 8, 2013 at 14:58
Perhaps you can use this: document.getElementById("MyElement").classList.toggle('MyClass'); — ferralucho
– ferralucho, Commented Feb 22, 2018 at 12:41

flavian · Accepted Answer · 2013-05-08 15:03:27Z

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 8, 2013 at 15:03

answered May 8, 2013 at 14:50

flavian

28.6k11 gold badges68 silver badges106 bronze badges

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

3 Comments

Sebas Over a year ago

he said javascript, not jquery

gen_Eric Over a year ago

Don't you mean .toggleClass("img1 img2");?

ddavison Over a year ago

@RocketHazmat Good catch.. @alex23: update your question accordingly: api.jquery.com/toggleClass/#toggleClass-className One or more class names (separated by spaces)...

Community · Accepted Answer · 2017-05-23 11:58:15Z

2

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

Related: Change an element's class with JavaScript

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 8, 2013 at 14:52

Sebas

21.6k9 gold badges60 silver badges109 bronze badges

6 Comments

Mr_Green Over a year ago

This is ok I suppose,

t1.className = t1.className == t1.className.indexOf('img1') > -1 ? t1.className.replace('img1','img2') : t1.className.replace('img2','img1')';

Herms Over a year ago

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.

Xavi López Over a year ago

I would say duplicate rather than related.

Sebas Over a year ago

@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 Over a year ago

@XaviLópez, right, depends on your morning mood :D

|

DaGLiMiOuX · Accepted Answer · 2013-05-08 14:56:37Z

0

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.

answered May 8, 2013 at 14:56

DaGLiMiOuX

8899 silver badges29 bronze badges

Comments

Scott Weaver · Accepted Answer · 2013-05-08 14:56:13Z

-1

You could use JQuery's toggleClass method:

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

}

answered May 8, 2013 at 14:56

Scott Weaver

7,3832 gold badges33 silver badges45 bronze badges

1 Comment

Scott Weaver Over a year ago

downvoters should consult meta.stackexchange.com/questions/45176/…

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

6 Comments

Comments

1 Comment

Linked

Hot Network Questions