我正在尝试通过添加和删除已设置样式但无法正常工作的活动 class 来创建切换按钮

Question

单击每个按钮时，我不断收到以下错误。 我认为我的选择器是正确的。 我不知道为什么 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

你拼错了parentNode，写了parentdNode