I am building a component with 4 preset buttons and a custom range input. I am able to toggle the active state on the buttons when clicking them but I want to remove the active state from all the buttons when I click into the input. I also want to clear the input field when I click out of the input.
HTML code:
<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> <span>%</span>
</div>
</div>
CSS:
.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;
}
JavaScript:
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');
});
}
Here is a link to my codepen so you can see it in full https://codepen.io/RECopeland/pen/rNEMMYZ