How to set the background color to all objects which are not clicked?

Good evening. Help please, Google quoted my code, but maybe I'm not Google, I need to implement the similarity of the radio buttons,here is my code:

document.querySelectorAll('.answer').forEach(ans => {

 ans.onclick = (e) => {

 answer = e.target.innerHTML

 ans.style.background = '#222'
 ans.style.color = '#fff'

 e.target.style.background = '#fff'
 e.target.style.color = '#222'

}

 })
April 4th 20 at 00:36
3 answers
April 4th 20 at 00:38
Solution
In the body of the question is not very clear, but if necessary,
To set the background color to all objects which are not clicked?
Something like this:
https://codepen.io/asokr/pen/RwNjryQ
var classname = document.getElementsByClassName('answer');
function myFunction(e){
 document.querySelectorAll('.answer').forEach(ans => {
 ans.style.background = '#222'
 ans.style.color = '#aeaeae'
});
 e.target.style.background = '#fff'
 e.target.style.color = '#000'
}
for (var i = 0; i < classname.length; i++) {
 classname[i].addEventListener('click', myFunction, false);
}
Thank you - madison commented on April 4th 20 at 00:41
April 4th 20 at 00:40
Solution
The type of this?
Yes, but hunting a minimum of space to dedicate to this, without tampering with the classes - madison commented on April 4th 20 at 00:43
@madison, well, rewrite with classes to work with inline-styles, but this is a solution. - martin.Hackett13 commented on April 4th 20 at 00:46
April 4th 20 at 00:42
Solution
Be careful to put the styles in CSS. For example, the default style at all, and a class active to only the selected item:
div.answer { background: #222; color: #aeaeae; }
div.answer.active { background: #fff; color: #000; }


Then a script like this:
const els = [...document.querySelectorAll('.answer')];

const toggle = event => {
 els.forEach(el => el.classList[event.target === el ? 'add' : 'remove']('active'));
}

els.forEach(el => el.addEventListener('click', toggle));

Fiddle
spoiler

Find more questions by tags JavaScript