How to unselct other classes

Question

https://code.sololearn.com/Wxsf3PWIRPZu/?ref=app

In the above code, I tried to make the background colour black of the clicked div and at the same, I want to return the background colour of other divs to green.
But in the code, when I clicks a div, it becomes black, but it remains black even after clicking other divs.
Please tell me how to do such that other divs will become green again while clicking another div (same class) ?

*Edit:

For example:

If I click Home, it will be black and others remain in that color (green).
When I click another div (e.g: skills), it should be black and the previously blackened div (home) should return to green.

*I want to do it using onclick event.

I can do it using hover effect in CSS, but I want to do that when usee clicks instead of hover

Answer 1

I can understand your problem very well. I have solved it for you. Checkout my code below, it's just a modification of your code. And it's the simplest approach.

https://code.sololearn.com/WDESpndUWWku/#html

Answer 2

💕 Prasant 💕 ✳️ do you want to add hover effect??

Answer 3

ᕙ(＠°▽°＠)ᕗ {inactive}
No
Onclick event

Answer 4

Mirielle[ INACTIVE ]
Ma'am, I know we can do that with hover effect. But I want to do it using onclick event.

Answer 5

ᕙ(＠°▽°＠)ᕗ {inactive}
But I want to do that automatically

For example:

If I click Home, it will be black and others remain in that color (green).
When I click another div (e.g: skills), it should be black and the previously blackened div (home) should return to green.

Answer 6

A easiest solution I think will be this code:

https://code.sololearn.com/W3Lq8YOGEXhG/?ref=app

Answer 7

An alternate solution

https://code.sololearn.com/WE3Ju55dAT59/#html

Answer 8

as I get your question you want to do this.
This is the way I found when I creating a select effect on my web site.
I just answer this to give an idea that you mean to do.

i cant post the code here. i ll put it on my codes look at it

Answer 9

https://code.sololearn.com/WWsA6B5hih5Y/?ref=app

Answer 10

💕 Prasant 💕 ✳️
you should reset your bg color after setting it to black

this.style.background = this.style.background ? "" : "black";

and it will be easier if you use jquery

Answer 11

I think Mirielle[ INACTIVE ] has exhausted everything that JavaScript gives in her example. This could be a bit too much for a beginner, but it's good to know that such a thing exists.

Answer 12

If you like 💕 Prasant 💕 ✳️ I added in the above code a new feature, swiching off the background if the same button will be clicked second time.

Answer 13

💕 Prasant 💕 ✳️

reset other and set current like this:

Array.from(menBtns).forEach(btn => btn.style.background = "");
this.style.background = "black";