Is there a way to switch the classList between various buttons using a single JavaScript function?

Question

Is there a way to switch the classList between various buttons using a single JavaScript function?

I'm currently developing a straightforward add to cart container that also has the ability to toggle between different product sizes.

However, I am facing difficulties in achieving this functionality without having to create separate functions for each button.

Below is the JavaScript code snippet:

const sizeBtn = document.getElementById("sizebutton");
const sizeBtnTwo = document.getElementById("sizebutton1");
const sizeBtnThree = document.getElementById("sizebutton2");

sizeBtn.addEventListener('click', sizeBtnActive);
sizeBtnTwo.addEventListener('click', sizeBtnActive);
sizeBtnThree.addEventListener('click', sizeBtnActive);

function sizeBtnActive () {
  sizeBtn.classList.toggle('active');
  sizeBtnTwo.classList.toggle('active');
  sizeBtnThree.classList.toggle('active');
}

Including CSS styles for better understanding:

.size-btn.faded,
.size-btn.active {
  font-size: 12px;
  color: #c2c2c2;
  background-color: #f0f0f0;
  width: 38px;
  height: 42px;
  border-radius: 0.5rem;
  border: none;
  margin-right: 10px;
  margin-bottom: 35px;
  cursor: none;
}

.size-btn.active {
  color: #ffff;
  background-color: #000000;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  transition: 1.5s ease;
  cursor: pointer;
}

If you can provide any guidance or suggestions on how to improve this code, it would be highly appreciated.

I have attempted to find solutions by researching similar issues online, but none of them have been effective so far. My goal is to toggle between each button individually without activating all of them at once.

javascript jquery css toggle

Answer 1

Answer №1

One way to simulate a radio button group is by creating a button group and toggling a data attribute on the active button.

Simply add a global listener for the button group and log the value after each change.

// Global button group listener
window.addEventListener('click', (e) => {
  if (e.target.closest('.button-group')) {
    toggleButtonGroup(e.target);
  }
});

// Log the new value after each change
document.querySelector('.size').addEventListener('click', (e) => {
  setTimeout((buttonGroup) => {
    console.log('Value:', getButonGroupValue(buttonGroup));
  }, 100, e.currentTarget);
});

// Toggle active state of buttons
function toggleButtonGroup(button) {
  const buttonGroup = button.closest('.button-group');
  buttonGroup.querySelectorAll('button').forEach((currButton) => {
    if (currButton === button && !currButton.dataset.active) {
      currButton.dataset.active = true;
    } else {
      delete currButton.dataset.active;
    }
  });
}

// Value accessor
function getButonGroupValue(buttonGroup) {
  return buttonGroup?.querySelector('[data-active]')?.value;
}

.button-group {
  display: inline-flex;
  border: thin solid grey;
  width: fit-content;
}

.button-group button {
  background: #CCC;
  border: none;
  min-width: 2.5rem;
  padding: 0.25rem;
}

.button-group button:hover {
  background: #DDA;
  cursor: pointer;
}

.button-group button[data-active] {
  background: #FFF;
}

.button-group button[data-active]:hover {
  background: #FFA;
}

<label>Size: </label>
<div class="button-group size">
  <button type="button" value="xs">XS</button>
  <button type="button" value="s">S</button>
  <button type="button" value="m" data-active>M</button>
  <button type="button" value="l">L</button>
  <button type="button" value="xl">XL</button>
  <button type="button" value="xxl">XXL</button>
</div>

Answer 2

One way to simulate a radio button group is by creating a button group and toggling a data attribute on the active button.

Simply add a global listener for the button group and log the value after each change.

// Global button group listener
window.addEventListener('click', (e) => {
  if (e.target.closest('.button-group')) {
    toggleButtonGroup(e.target);
  }
});

// Log the new value after each change
document.querySelector('.size').addEventListener('click', (e) => {
  setTimeout((buttonGroup) => {
    console.log('Value:', getButonGroupValue(buttonGroup));
  }, 100, e.currentTarget);
});

// Toggle active state of buttons
function toggleButtonGroup(button) {
  const buttonGroup = button.closest('.button-group');
  buttonGroup.querySelectorAll('button').forEach((currButton) => {
    if (currButton === button && !currButton.dataset.active) {
      currButton.dataset.active = true;
    } else {
      delete currButton.dataset.active;
    }
  });
}

// Value accessor
function getButonGroupValue(buttonGroup) {
  return buttonGroup?.querySelector('[data-active]')?.value;
}

.button-group {
  display: inline-flex;
  border: thin solid grey;
  width: fit-content;
}

.button-group button {
  background: #CCC;
  border: none;
  min-width: 2.5rem;
  padding: 0.25rem;
}

.button-group button:hover {
  background: #DDA;
  cursor: pointer;
}

.button-group button[data-active] {
  background: #FFF;
}

.button-group button[data-active]:hover {
  background: #FFA;
}

<label>Size: </label>
<div class="button-group size">
  <button type="button" value="xs">XS</button>
  <button type="button" value="s">S</button>
  <button type="button" value="m" data-active>M</button>
  <button type="button" value="l">L</button>
  <button type="button" value="xl">XL</button>
  <button type="button" value="xxl">XXL</button>
</div>

Answer 3

Answer №2

I am looking to create a toggle functionality where each button can be activated individually, without activating all at once.

The most efficient way to achieve this is by assigning a common class name to all the buttons first.

<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>

Then, we can select all these buttons using querySelectorAll and use a forEach loop to deactivate all of them initially, and then activate only the selected one:

const btns = document.querySelectorAll(".btn")

function disableAllButtons() {
    btns.forEach(btn => {
        btn.classList.remove("active")
    })
}

btns.forEach(btn => {
    btn.addEventListener(() => {
        disableAllButtons()

        btn.classList.add("active")
    })
})

Answer 4

I am looking to create a toggle functionality where each button can be activated individually, without activating all at once.

The most efficient way to achieve this is by assigning a common class name to all the buttons first.

<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>

Then, we can select all these buttons using querySelectorAll and use a forEach loop to deactivate all of them initially, and then activate only the selected one:

const btns = document.querySelectorAll(".btn")

function disableAllButtons() {
    btns.forEach(btn => {
        btn.classList.remove("active")
    })
}

btns.forEach(btn => {
    btn.addEventListener(() => {
        disableAllButtons()

        btn.classList.add("active")
    })
})

Is there a way to switch the classList between various buttons using a single JavaScript function?

Answer №1

Answer №2

Similar questions

Ensure that all floating divs have uniform height

What methods can be used to ensure a required minimum delay time between function executions?

Having a flash video load on a new page in the same position as it was on the previous page

Issue with res.redirect not functioning as expected

[server-auth]: The `useSession` function is required to be enclosed within a <SessionProvider /> component to avoid the error occurring in the current JavaScript file

Can you explain the distinction between bodyparser.urlencoded and bodyparser.json?

Aligning the Twitter and Facebook buttons

Using Javascript to create a radio button group

responsive mega menu with multiple levels in Bootstrap 3

Is VueJS2 using the computed property/method to modify Vue data?

What is the process for incorporating a custom button for selecting the date and closing the calendar in bootstrap-datepicker?

What are some effective ways to integrate the WordPress API with ReactJS?

How can you ensure a script runs only once another script has completed its execution?

Choosing a single radio button value within a nested ng-repeat loop in AngularJS

dividing values for future angular use

The footer menu fails to glide upwards

Retrieve the file from Amazon S3 and download it

I encountered an issue with the "props map error" while working on this

Press the jQuery button and inform me once it has been activated

Are you familiar with using double conditional rendering in a React application?