I have a problem with a function that selects active items. There are some input/label fields with sectoins ( one section - one active/clicked element ) It only works when I double-click. If I click one time then no result. I can set setTimeout for that code and then works but not always.
Example:
var radios = document.querySelectorAll('#calculator input[type=radio]');
var label = document.querySelectorAll("#calculator label");
function active(e) {
radios.forEach((el,index) => {
if(el.checked === true) {
console.log('true');
label[index].classList.add('active');
} else {
console.log('false');
label[index].classList.remove('active');
}
})
}
Example html field:
<input id="p75" type="radio" name="geodesic_size" value="11250" >
<label for="p75">
<input id="p30" type="radio" name="geodesic_size" value="5626" checked>
<label for="p30">
Not sure if this is what you need, but here's an example of toggling the active class when the checked input changes:
const radios = document.querySelectorAll('input[type="radio"]');
const label = document.querySelectorAll("label");
function active(e) {
radios.forEach((el,index) => {
if(el.checked === true) {
console.log('true');
label[index].classList.add('active');
} else {
console.log('false');
label[index].classList.remove('active');
}
})
}
radios.forEach(el => {
el.addEventListener('change', active);
}).active {
color: red;
}<input id="p75" type="radio" name="geodesic_size" value="11250" >
<label for="p75">First</label>
<input id="p30" type="radio" name="geodesic_size" value="5626" checked>
<label for="p30" class="active">Second</label>The other answers seem to work fine, I would just add a couple suggestions:
First, you can also access the label(s) associated to an element with HTMLInputElement.labels. Using el.labels[0] would IMO be a bit more robust than relying on the index of the radio button and the label to be the same.
If all you need to do is toggle an active class like this, you could accomplish the same thing with CSS only by using the adjacent sibling combinator (+) and get rid of all the JavaScript:
input:checked + label {
color: red;
}<div>
<input id="p75" type="radio" name="geodesic_size" value="11250">
<label for="p75">p75</label>
</div>
<div>
<input id="p30" type="radio" name="geodesic_size" value="5626" checked>
<label for="p30">p30</label>
</div><div id="calculator"></div>.As
#calculator input[type=radio]this means select all input with type equals to radio, which are children of id#calculator.
onclick event and put you logic for active() function there..active{background-color:red;} css.var radios = document.querySelectorAll('#calculator input[type=radio]');
var label = document.querySelectorAll("#calculator label");
radios.forEach(radioBtn => {
radioBtn.onclick = function() {
radios.forEach((el, index) => {
console.log(el.checked);
if (el.checked === true) {
console.log('true');
label[index].classList.add('active');
} else {
console.log('false');
label[index].classList.remove('active');
}
})
};
}).active {
background-color: red;
}<div id="calculator">
<input id="p75" type="radio" name="geodesic_size" value="11250">
<label for="p75">p75</label>
<input id="p30" type="radio" name="geodesic_size" value="5626" checked>
<label for="p30">p30</label>
</div>