I have 3 buttons, I want one of them to be in clicked state by default unless I click the other button in HTML/JS

Question

I want one button to be in clicked state by default unless I click on the other button. When I click the other button then everything should work like normal buttons.

Answer 1

You need to do something with CSS to emulate the active style, and use JS to trigger that CSS class:

 active.classList.add("active") const btns = document.querySelectorAll("button") btns.forEach((el, i) => { el.onclick = () => { el.classList.add("active") el.innerText = "Active" btns.forEach((el, j) => { if (i !== j) { el.classList.remove("active") el.innerText = "Non Active" } }) } })

 .active { border: 1px inset #DDD; background: rgb(245, 245, 245); }

 <button id="active">Active</button> <button>Non Active</button> <button>Non Active</button>