How to select multiple buttons and keep the border on each one clicked?

Question

So we have 4 buttons and when we click on one it gets a black border but when you click another button the previous button loses its border and the new one gets it.

const btnPlaces = document.querySelectorAll('.btn-places');

for (let i = 0; i < btnPlaces.length; i++) {
  btnPlaces[i].addEventListener("click", function(e) {
    let prevBtn = document.querySelector(".checked");
    if (prevBtn) {
      prevBtn.classList.remove("checked");
      e.target.classList.add("checked");
    } else {
      e.target.classList.add("checked");
    }
  });
}

.checked {
  border: 3px solid rgb(34, 34, 34);
}

<button class="btn-places" id="berlin">BERLIN</button>
<button class="btn-places" id="netherlands">NETHERLANDS</button>
<button class="btn-places" id="sweden">SWEDEN</button>
<button class="btn-places" id="italy">ITALY</button>

Is there an alternative solution that is more efficient?

Are you trying to keep the black border on the button when it's selected even if another button is clicked? In other words... do you want to see multiple buttons with the border? — Millhorn, Sep 09 '22 at 14:25
Please see [ask], then revise your post title to ask a clear, _specific_ question. Don't YELL AT US. — isherwood, Sep 09 '22 at 14:25
Short answer: You're using the wrong control. This is why checkboxes exist. — isherwood, Sep 09 '22 at 14:26

score 0 · Accepted Answer · answered Sep 09 '22 at 14:22

0

You can use :focus state in CSS. Only one element is active at the time with :focus state.

.btn-places:focus {
  border: 3px solid rgb(34, 34, 34);
}

<button class="btn-places" id="berlin">BERLIN</button>
<button class="btn-places" id="netherlands">NETHERLANDS</button>
<button class="btn-places" id="sweden">SWEDEN</button>
<button class="btn-places" id="italy">ITALY</button>

answered Sep 09 '22 at 14:22

Nick Vu

14,512
4
21
31

wow that was easy , but i guess you cant scale it from there. how do you select the one button with focus so you can get data and manipulate it? – Sep 09 '22 at 15:28
1

You can use `onClick` for every click on those buttons. If you want to keep the selected button, I think radio button is more suitable for you :D @NickGlav – Nick Vu Sep 09 '22 at 15:45

score 0 · Answer 2 · answered Sep 09 '22 at 14:22

You can use an input radio to it, it will provide you a pseudo-selector ::checked where you can style as you wish It's provide a onchecked callback function too to use your javascript to do something

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

score 0 · Answer 3 · answered Sep 09 '22 at 14:27

It sounds like you're trying to keep the button border even when another is clicked. In that case, you would need to remove:

prevBtn.classList.remove("checked");

from your condition.

const btnPlaces = document.querySelectorAll('.btn-places');

for (let i = 0; i < btnPlaces.length; i++) {
  btnPlaces[i].addEventListener("click", function(e) {
    let prevBtn = document.querySelector(".checked");
    if (prevBtn) {
      e.target.classList.add("checked");
    } else {
      e.target.classList.add("checked");
    }
  });
}

.checked {
  border: 3px solid rgb(34, 34, 34);
}

<button class="btn-places" id="berlin">BERLIN</button>
<button class="btn-places" id="netherlands">NETHERLANDS</button>
<button class="btn-places" id="sweden">SWEDEN</button>
<button class="btn-places" id="italy">ITALY</button>

It doesn't really sound like he wants to keep border when clicking on another button, it sounds more like his code is working as intended but he just wants to know if there is a better way of doing it — Chris G, Sep 09 '22 at 14:31
The OP says, ***when we click on one it gets a black border but when you click another button the previous button loses its border and the new one gets it.*** - That indicates to me the behavior that's happening is what he's trying to avoid. He's knew... just doesn't know how to ask the right question. — Millhorn, Sep 09 '22 at 14:39

How to select multiple buttons and keep the border on each one clicked?

3 Answers3