How is everything? I'm doing a JavaScript project and I must give the option to select some buttons and if a button already clicked is clicked again, the program must deselect it and return to the state of no button clicked. I searched in some forums and documentation, I managed to do the part of selecting an option but I couldn't make it so that clicking the button again, all the buttons are without selection. Can someone help me? Thank you so much
const circle = document.querySelectorAll('.circle');
for (let i = 0; i < circle.length; i++) {
const el = circle[i];
el.onclick = () => {
for (let j = 0; j < circle.length; j++) {
const color = circle[j] === el ? 'hsl(25, 97%, 53%)' : '#262d37';
circle[j].style.backgroundColor = color;
}
}
}
const submit = document.querySelectorAll('.btn');
for (let i = 0; i < submit.length; i++) {
const el = submit[i];
el.onclick = () => {
for (let j = 0; j < submit.length; j++) {
const color = submit[j] === el ? '#fff' : 'hsl(25, 97%, 53%)';
submit[j].style.backgroundColor = color;
submit[j].style.color = 'hsl(25, 97%, 53%)';
}
}
}.circle {
border-radius: 50%;
width : 15px;
height : 15px;
padding : 10px;
margin-left : 20px;
display : inline-block;
background : #262d37;
color : #e7eaec;
text-align : center;
}
.circle:hover {
border-radius: 50%;
width : 15px;
height : 15px;
padding : 10px;
margin-left : 20px;
display : inline-block;
transition : 0.5s;
opacity : 0.7;
color : #e7eaec;
text-align : center;
}
.btn {
background-color: hsl(25, 97%, 53%);
color : #e7eaec;
margin-top : 30px;
margin-left : 30px;
margin-right : 30px;
text-align : center;
border-radius : 50px;
padding-top : 10px;
padding-bottom : 10px;
font-weight : 700;
font-family : "Overpass", sans-serif;
}<div class='circle'>1</div>
<div class='circle'>2</div>
<div class='circle'>3</div>
<div class='circle'>4</div>
<div class='circle'>5</div>
<div class="btn">SUBMIT</div>I tried to put a check with if that if the onclique was true it would become false but I didn't get the desired result
If you want a select/deselect logic, you can try setting a class when you click a button and remove it if click again.
For this purpose there is the toggle method in the classList of the elements (adds if it does not have the class or remove it otherwise)
circles.forEach(c => {
c.onclick = () => c.classList.toggle('selected')
})
For each circle, toggle the class 'selected'. I renamed circle to circles (its a collection of circles).
P.S: using a class instead modify inline style is usually a better practice.
const circles = document.querySelectorAll('.circle');
circles.forEach(c => {
c.onclick = () => c.classList.toggle('selected')
}).circle {
border-radius: 50%;
width : 15px;
height : 15px;
padding : 10px;
margin-left : 20px;
display : inline-block;
background : #262d37;
color : #e7eaec;
text-align : center;
}
.circle:hover {
border-radius: 50%;
width : 15px;
height : 15px;
padding : 10px;
margin-left : 20px;
display : inline-block;
transition : 0.5s;
opacity : 0.7;
color : #e7eaec;
text-align : center;
}
.btn {
background-color: hsl(25, 97%, 53%);
color : #e7eaec;
margin-top : 30px;
margin-left : 30px;
margin-right : 30px;
text-align : center;
border-radius : 50px;
padding-top : 10px;
padding-bottom : 10px;
font-weight : 700;
font-family : "Overpass", sans-serif;
}
.circle.selected {
background-color: hsl(25, 97%, 53%);
}<div class='circle'>1</div>
<div class='circle'>2</div>
<div class='circle'>3</div>
<div class='circle'>4</div>
<div class='circle'>5</div>
<div class="btn">SUBMIT</div>Instead of this:
const color = circle[j] === el ? 'hsl(25, 97%, 53%)' : '#262d37'; circle[j].style.backgroundColor = color;
You can toggle the class, so you will have
circle[j].classList.toggle(colorWhenClicked)
And in your html file you will a similar code,
<div class='circle basicColorClass'>1</div>
<div class='circle basicColorClass'>2</div>
<div class='circle basicColorClass'>3</div>
<div class='circle basicColorClass'>4</div>
Now in your css code:
.basicColorClass{
color: #262d37;
}
.colorWhenClicked{
color: hsl(25, 97%, 53%);
}
You need to add active class to track which circle is active and then we can compare with existing circles for deciding to add/remove active class.
I also leave some comments for those changes in Javascript, you can check it out.
const circle = document.querySelectorAll('.circle');
for (let i = 0; i < circle.length; i++) {
const el = circle[i];
el.onclick = (e) => {
//find the active circle
const activeCircle = document.querySelectorAll('.circle.active')[0];
//if it's active, remove `active` class
if (activeCircle) {
activeCircle.classList.remove("active");
}
//find the current clicked circle
const currentCircle = e.target;
//if the current clicked circle is different with the active circle
//we add the `active` class to the current circle
//if they're the same, we should not add the active class
if (currentCircle !== activeCircle) {
currentCircle.classList.add("active");
}
}
}
const submit = document.querySelectorAll('.btn');
for (let i = 0; i < submit.length; i++) {
const el = submit[i];
el.onclick = () => {
for (let j = 0; j < submit.length; j++) {
const color = submit[j] === el ? '#fff' : 'hsl(25, 97%, 53%)';
submit[j].style.backgroundColor = color;
submit[j].style.color = 'hsl(25, 97%, 53%)';
}
}
}.circle {
border-radius: 50%;
width: 15px;
height: 15px;
padding: 10px;
margin-left: 20px;
display: inline-block;
background: #262d37;
color: #e7eaec;
text-align: center;
}
.circle.active {
background-color: hsl(25, 97%, 53%);
}
.circle:hover {
border-radius: 50%;
width: 15px;
height: 15px;
padding: 10px;
margin-left: 20px;
display: inline-block;
transition: 0.5s;
opacity: 0.7;
color: #e7eaec;
text-align: center;
}
.btn {
background-color: hsl(25, 97%, 53%);
color: #e7eaec;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
text-align: center;
border-radius: 50px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 700;
font-family: "Overpass", sans-serif;
}<div class='circle'>1</div>
<div class='circle'>2</div>
<div class='circle'>3</div>
<div class='circle'>4</div>
<div class='circle'>5</div>
<div class="btn">SUBMIT</div>