Remove click in JavaScript-CodePudding

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

HTML

<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 >SUBMIT</div>

CSS

.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;
}

JavaScript

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%)';
      }
    }
  }

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

CodePudding user response：

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%);
}

CodePudding user response：

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.

Simple snippet without logic on submit

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 >SUBMIT</div>

CodePudding user response：

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 >SUBMIT</div>