how to change class of an element by click

[Funkaholik]

Hi there
in this exampe
you can add class .blue to a bloc by thirst click
but how change it to .red by second click?
it’s so simple but i can’t figure this out

with pure javascript it’ll be even more cool!

[Shikkediel]

This’ll loop over the colours in the array tones:

Demo

Edit – if you’ll be changing the colour many times, setting inline style’s probably more convenient (more efficient) than adding and removing classes. Particularly with vanilla JS.

if count is larger than length of array use modulus to return to beginning

That’s the comment I added to the code. But just to not further complicate things. It’s actually not really the case – an array is zero indexed (first element is number 0). So the count of current is as large as the length of the array but that’s one more than the maximum indexed number. I’m horrible at explaining.

[Shikkediel]

This is the more basic approach of what you asked about:

Link

It’ll only work if the element doesn’t have any other classes though because they would be removed in the current form… that’s a lot easier with jQuery.

[Funkaholik]

thanx Shik man
but i really want to add a different class to an element by click,
and then bring back the prevous class by second click
so it’s like a toggle between classes
it’s not about colors))

[Shikkediel]

Yeah, my coding frenzy of late is shooting past the target. Lol. A simple toggle sounds doable. I’ll add an example to this post later on.

Slightly broader approach

[Funkaholik]

Actually i didn’t find any workin’ jquery method to toggle between classes((
if you can provide one here it’ll be great.

[Beverleyh]

I found this in my archived code samples. Looks like it does what you want http://fofwebdesign.co.uk/template/_testing/misc/change-class.htm

The element that has its class toggled in the demo starts without any class being set (so you see it in a totally unstyled state to begin with) but you can give it one so that the alternate toggle looks more obvious.

[ershwetabansal]

Hey,

See if this helps you
http://codepen.io/ershwetabansal/pen/QKYgjy

[Shikkediel]

Using className with vanilla JS is a lot nicer. :-)
It can be very straightforward with jQuery too:

Demo

[Funkaholik]

Maaan i gotta learn js .. got to force myself to do it because
i’m marking time for too long instead of making things beautiful=))

thanx for all of you guys who’s helped but i found a very few workin best for me

that one is supa clean i like it

but these two first and second are doing exactly what i need

button clicked = class of another element gets toggled
but how to add more classes?

[Shikkediel]

button clicked = class of another element gets toggled
but how to add more classes?

Which pen are you referring to, Beverleyh’s code?

[Funkaholik]

i like yours because it’s clean and a bit more readeable and understandable
but i need a trigger to change multiple classes of any element (maybe even in a specific order)
which you haven’t coded here

[Shikkediel]

It does actually trigger these multiple classes but because they have the same property (background), the last one in the style overrides any previous classes. You’ll notice it turns blue if you switch heir places in the order of the css. So if you add several classes with different properties, they’ll all apply (and toggle). On the other hand, using the current JS it’s not possible the influence the order of the classes applied – the style itself is determining it.

[Funkaholik]

nope it doesn’t .. if you have more then 2 classes like here

[Shikkediel]

It does but you don’t notice it when all the properties are changing the background…

Using different properties

[Author]

Posts