Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLInputElement. (xx.js:55)
const activateButtons = () => {
const buttons = document.querySelectorAll('[type="radio"]');
buttons.forEach(button => {
button.addEventListener('click', () => {
button.parentdNode.classList.add('active');
buttons.forEach(otherButton => {
if (otherButton !== button) {
otherButton.parentNode.classList.remove('active');
}
});
});
});
};
activateButtons().btn{
color: #007bff;
border-color: #007bff;
border: 1px solid #007bff;
padding:10px;
}
input[type="radio"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.active{
background-color: #007bff;
color: #FFF;
}<!--//button-->
<div class="btn-group btn-group-toggle" style="margin-bottom: 1rem">
<label class="btn btn-outline-primary active" >
<input type="radio" name="source" autocomplete="off" checked> Button A
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="source" autocomplete="off" > Button B
</label>
</div>
<!--//button-->