I'm trying to create toggle button by adding and removing active class that I've already styled but it wasn't working

Question

I kept getting the following error as I click each button. I think my selector is correct. I can't figure out why 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-->

Answer 1

You misspelled parentNode, writing parentdNode