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

obtain an inner element within a container using the class name in a div

Does the react key have scope limited to the local environment or does it have

Verify if a certain value exists in an array while using ng-if inside ng-repeat

What is the best way to eliminate the "onclick" attribute from an HTML element using JavaScript?

Using Vue3 to conditionally display a child div based on the class of its parent div

Having trouble navigating through multiple layers of nested array data in react js

How can I display a calendar with a complete month view using ng-repeat?

Vertical tab design in Bootstrap does not automatically switch tabs

Unable to substitute 'npm run build' for 'webpack' command

Update the datapicker calendar to select dates within a one-year range

Tips for incorporating images into an `.mdx` file located outside of the `public/` directory with the `next-mdx-remote` package in Next JS

Using knockout to data bind a function to an onclick event that takes in multiple parameters

Access real-time information via JSON

Adjust the size and position of the text input field

What are the steps for making Ajax calls?

Attempting to call setState (or forceUpdate) on a component that has been unmounted is not permissible in React

What is the best way to conceal the main list but still show the nested list within?

Navigating through objects within arrays within objects in Angular

Determine the minimum and maximum width of jQuery UI resizable during the "resizestart" event

Transforming Thomas J Bradley's signature pad JSON into a PNG file using C# programming language