Steps to eliminate the active state of a button after clicking on an input

Question

Steps to eliminate the active state of a button after clicking on an input

I am currently working on a component that consists of 4 preset buttons and a customized range input. The issue I am facing is that while I can toggle the active state on the buttons when they are clicked, I want to remove the active state from all the buttons when I click into the input field. Additionally, I would like the input field to clear out when I click outside of it.

Here is the code snippet:

let btnContainer = document.getElementById("rc-button-bar");
let btns = btnContainer.getElementsByClassName("ce-button");
let input = document.getElementById("customPercent");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    (document.querySelector('.is-active')) ? document.querySelector('.is-active').classList.remove('is-active'): '';
    this.classList.add('is-active');
  });
}

.btn-primary.ce-button {
  width: 100%;
  height: 48px;
  padding: auto;
  border: 4px solid #0079c1;
  border-radius: 5px;
  background: transparent;
  color: #0079c1;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary.ce-button:hover,
.btn-primary.ce-button:active {
  background: #0079c1;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer !important;
}

.is-active {
  background: #0079c1 !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

<div class="row selectors d-flex justify-content-center" id="rc-button-bar">
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
  </div>
  <div class="col-sm-12 col-md-2 mb-2 d-flex align-items-center">
    <input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input>&nbsp;<span>%</span>
  </div>
</div>

javascript html css forms bootstrap-4

Answer 1

Answer №1

It seems that you are not actually toggling the active state of a button, but rather just changing its appearance. However, assuming that was a miscommunication error and you simply want to adjust the style after the button is clicked.

The solution is quite straightforward. You just need to attach a click event listener to the input and have it remove the 'is-active' class from the buttons (if they have it):

input.addEventListener('click', function() { // Handle click event
 for (let a = 0; a < btns.length; a++) { // Loop through buttons
   if (btns[a].classList.contains('is-active')) { // Check for class
     btns[a].classList.remove('is-active'); // Remove the class
    }
  }
})

To clear the input when clicking away from it, simply add a blur event listener that resets its value to an empty string:

input.addEventListener('blur', function() {  // Handle blur event
   input.value = ''; // Clear the input
});

Feel free to run the complete code provided below to confirm that it functions as expected:

// JavaScript implementation
let btnContainer = document.getElementById("rc-button-bar");
let btns = btnContainer.querySelectorAll(".ce-button");
let input = document.getElementById("customPercent");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    (document.querySelector('.is-active')) ? document.querySelector('.is-active').classList.remove('is-active'): '';
    this.classList.add('is-active');
  });
}

input.addEventListener('click', function() {
  for (let a = 0; a < btns.length; a++) {
    if (btns[a].classList.contains('is-active')) {
      btns[a].classList.remove('is-active');
    }
  }
})

input.addEventListener('blur', function() {
  input.value = '';
});

// CSS styling
.btn-primary.ce-button {
  width: 100%;
  height: 48px;
  padding: auto;
  border: 4px solid #0079c1;
  border-radius: 5px;
  background: transparent;
  color: #0079c1;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary.ce-button:hover,

.btn-primary.ce-button:active {
  background: #0079c1;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer !important;
}

.is-active {
  background: #0079c1 !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

// HTML structure
<div class="row selectors d-flex justify-content-center" id="rc-button-bar">
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
  </div>
  <div class="col-sm-12 col-md-2 mb-2 d-flex align-items-center">
    <input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input>&nbsp;<span>%</span>
  </div>
</div>

Answer 2

It seems that you are not actually toggling the active state of a button, but rather just changing its appearance. However, assuming that was a miscommunication error and you simply want to adjust the style after the button is clicked.

The solution is quite straightforward. You just need to attach a click event listener to the input and have it remove the 'is-active' class from the buttons (if they have it):

input.addEventListener('click', function() { // Handle click event
 for (let a = 0; a < btns.length; a++) { // Loop through buttons
   if (btns[a].classList.contains('is-active')) { // Check for class
     btns[a].classList.remove('is-active'); // Remove the class
    }
  }
})

To clear the input when clicking away from it, simply add a blur event listener that resets its value to an empty string:

input.addEventListener('blur', function() {  // Handle blur event
   input.value = ''; // Clear the input
});

Feel free to run the complete code provided below to confirm that it functions as expected:

// JavaScript implementation
let btnContainer = document.getElementById("rc-button-bar");
let btns = btnContainer.querySelectorAll(".ce-button");
let input = document.getElementById("customPercent");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    (document.querySelector('.is-active')) ? document.querySelector('.is-active').classList.remove('is-active'): '';
    this.classList.add('is-active');
  });
}

input.addEventListener('click', function() {
  for (let a = 0; a < btns.length; a++) {
    if (btns[a].classList.contains('is-active')) {
      btns[a].classList.remove('is-active');
    }
  }
})

input.addEventListener('blur', function() {
  input.value = '';
});

// CSS styling
.btn-primary.ce-button {
  width: 100%;
  height: 48px;
  padding: auto;
  border: 4px solid #0079c1;
  border-radius: 5px;
  background: transparent;
  color: #0079c1;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary.ce-button:hover,

.btn-primary.ce-button:active {
  background: #0079c1;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer !important;
}

.is-active {
  background: #0079c1 !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

// HTML structure
<div class="row selectors d-flex justify-content-center" id="rc-button-bar">
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
    <button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
  </div>
  <div class="col-sm-12 col-md-2 mb-2 d-flex align-items-center">
    <input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input>&nbsp;<span>%</span>
  </div>
</div>

Steps to eliminate the active state of a button after clicking on an input

Answer №1

Similar questions

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

There seems to be an issue with byRole as it is failing to return

JavaScript Nested Array Looping Script

What is the best way to create a global variable using jQuery?

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

What is the best way to change a date-containing string into a Json object?

Updating the background image without having to validate the cache

The functionality of the handleTextShow function in components>DrinkList.js is not working as expected after integrating an API

The value returned when using $.css('transform') is incorrect and displays as "rotate"

Issue with spacing dropdown choices within primary navigation bar

Issue with clicking a button in Selenium using JavaScript for automation

Having trouble using the search feature on ngx-mat-select-search for typing?

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

JavaScript doesn't automatically redirect after receiving a response

Incorporating the power of ES6 into a pre-existing website using React

Determine the worth of various object attributes and delete them from the list

Optimal approach for managing numerous modals containing map data in Next.js

What is the method for opening the image gallery in a Progressive Web App (PWA)?

What is the best way to retrieve an <a> tag element using Selenium in Python?

React hooks causing the for loop to only work on the second iteration