How to toggle in button using javascript?

Question

I am having a button when I click it becomes active but on another click, I want to remove active CSS

When I click on the button it becomes active by adding an active class to it. Here is what I tried, but what I was trying is when I click on the same buttons the active CSS should be removed, basically want to do toggle

const myDemo = (event) => {
  const clickedElem = event.target
  const allBtns = document.querySelectorAll('.btn.light')
  allBtns.forEach(btn => btn.classList.remove('active'))
  clickedElem.classList.add('active')
}

.active {
  background: red;
}

<button onclick="myDemo(event)" class="btn light">DOG</button>

Derek Wang · Accepted Answer · 2020-10-14 18:41:09Z

You can use clickedElem.classList.toggle to toggle the classes.

Before that, you need to remove the active class names except for the current selected button as follows.

const myDemo = (event) => {
  const clickedElem = event.target;
  console.log(clickedElem);
  const allBtns = document.querySelectorAll('.btn.light');
  allBtns.forEach(btn => {
    if (clickedElem != btn) {
      btn.classList.remove('active');
    }
  });
  clickedElem.classList.toggle('active');
}

.active {
  background: red;
}

<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>

Or the other way, you can store the previous selected button and use it.

let previousClicked = null;

const myDemo = (event) => {
  const clickedElem = event.target;
  if (clickedElem === previousClicked) {
    clickedElem.classList.remove('active');
    return;
  }
  
  if (previousClicked != null) {
    previousClicked.classList.remove('active');
  }
  clickedElem.classList.add('active');
  previousClicked = clickedElem;
}

.active {
  background: red;
}

<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>

sibumi · Accepted Answer · 2020-10-14 18:30:35Z

0

You can try using built-in toggle function in your "myDemo" function. Instead of using remove(), just add this line:

btn.classList.toggle("active");

answered Oct 14, 2020 at 18:30

sibumi

814 bronze badges

Comments

Marc · Accepted Answer · 2020-10-14 18:32:22Z

0

I suggest using classList.toggle().

const myDemo = (event) => {
  const clickedElem = event.target;
  const allBtns = document.querySelectorAll('.btn.light');

  // remove the class from all buttons
  allBtns.forEach(btn => btn.classList.remove('active'));

  // reapply the class for the button that was clicked
  clickedElem.classList.toggle('active');
}

.active {
  background: red;
}

<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>
<button onclick="myDemo(event)" class="btn light">DOG</button>

answered Oct 14, 2020 at 18:32

Marc

11.6k2 gold badges40 silver badges48 bronze badges

Comments

ctrl-raul · Accepted Answer · 2020-10-14 18:37:05Z

0

From what I can see in your function, you seem to want to also remove the active class from any other button else in the page. This is my approach:

let activeButton;

const selectButton = e => {
  if (activeButton) {
    activeButton.classList.remove('active');
  }

  if (activeButton === e.currentTarget) {
    activeButton = null;
    return;
  }

  e.currentTarget.classList.add('active');
  activeButton = e.currentTarget;
};

This way it does not have to loop though every buttons to deactive them, as it keeps track of the active button.

answered Oct 14, 2020 at 18:37

ctrl-raul

1

Collectives™ on Stack Overflow

How to toggle in button using javascript?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related