Home › Forums › JavaScript › how to change class of an element by click
- This topic is empty.
-
AuthorPosts
-
October 22, 2016 at 10:27 am #246910
Funkaholik
ParticipantHi 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 outwith pure javascript it’ll be even more cool!
October 22, 2016 at 11:10 am #246911Shikkediel
ParticipantThis’ll loop over the colours in the array
tones
: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 ofcurrent
is as large as the length of the array but that’s one more than the maximum indexed number. I’m horrible at explaining.October 22, 2016 at 12:01 pm #246912Shikkediel
ParticipantThis is the more basic approach of what you asked about:
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.
October 22, 2016 at 12:03 pm #246913Funkaholik
Participantthanx 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))October 22, 2016 at 12:05 pm #246914Shikkediel
ParticipantYeah, 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.
October 23, 2016 at 7:46 am #246938Funkaholik
ParticipantActually i didn’t find any workin’ jquery method to toggle between classes((
if you can provide one here it’ll be great.October 23, 2016 at 8:25 am #246943Beverleyh
ParticipantI 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.
October 23, 2016 at 10:10 am #246944ershwetabansal
ParticipantHey,
See if this helps you
http://codepen.io/ershwetabansal/pen/QKYgjyOctober 23, 2016 at 11:48 am #246947Shikkediel
ParticipantUsing
className
with vanilla JS is a lot nicer. :-)
It can be very straightforward with jQuery too:November 2, 2016 at 3:17 am #247293Funkaholik
ParticipantMaaan 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?November 2, 2016 at 12:34 pm #247333Shikkediel
Participantbutton clicked = class of another element gets toggled
but how to add more classes?Which pen are you referring to, Beverleyh’s code?
November 2, 2016 at 1:00 pm #247335Funkaholik
Participanti 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 hereNovember 2, 2016 at 2:35 pm #247339Shikkediel
ParticipantIt 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.November 4, 2016 at 3:55 pm #247507Funkaholik
Participantnope it doesn’t .. if you have more then 2 classes like here
November 4, 2016 at 4:10 pm #247508Shikkediel
ParticipantIt does but you don’t notice it when all the properties are changing the background…
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.