JS 上只有一個活躍的 btn

Question

需要做到這一點，以便您只能從兩個活動按鈕中選擇一個。 HTML

<button class="main__btn">uomo</button>
<button class="main__btn">donna</button>

JS

'use strict'
const mainBtn = document.querySelectorAll('.main__btn');
mainBtn.forEach(el => {
    el.addEventListener('click', (event) => {
        const target = event.currentTarget;
        if(el.classList.contains('active')) {
            el.classList.remove('active');
        } else {
            el.classList.add('active');
        }
    });
});

Answer 1

嘗試使用我建議的 ID 來簡化代碼！ 如此簡單的任務需要太多行

 'use strict'
    const mainBtn = document.querySelectorAll('.main__btn');
    const uomo = document.getElementById('uomo');
    const donna = document.getElementById('donna');
    mainBtn.forEach(el => {
        el.addEventListener('click', (event) => {
            const target = event.currentTarget;
                console.log(target.id);
            if(target.id=="uomo") {
                donna.classList.remove('active');
                            uomo.classList.add('active');
            } else {
                donna.classList.add('active');
                        uomo.classList.remove('active');
            }
        });
    });

Answer 2

 const buttonOne = document.getElementById('buttonOne'); const buttonTwo = document.getElementById('buttonTwo'); buttonOne.addEventListener('click', makeActive); buttonTwo.addEventListener('click', makeActive); function makeActive(event){ if(!event.target.classList.contains('active')){ buttonOne.classList.toggle('active') buttonTwo.classList.toggle('active') } }

 .active{ background-color:black; color:white; }

 <button id='buttonOne' class="main__btn active" >uomo</button> <button id='buttonTwo' class="main__btn">donna</button>

你也可以這樣做。