Как задать фон и цвет всем объектам по которым не произведён клик?

Question

[historydev]

Добрый вечер. Помогите пожалуйста, в гугле цитируется мой код, но возможно я не так гуглил, мне нужно реализовать подобие радио кнопок,вот мой код:

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'

		}

	})

Answer 1

[Павел]

Что в теле вопроса, не очень понятно, но если нужно,
Задать фон и цвет всем объектам по которым не произведён клик?
То, что то типа такого:
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);
}

Comments

[historydev]

Спасибо

Answer 2

[Сергей Соколов]

Аккуратнее вынести стили в CSS. Скажем, стили по умолчанию у всех и некий класс active для единственного выбранного элемента:

div.answer { background: #222; color: #aeaeae; }
div.answer.active { background: #fff; color: #000; }

Тогда скрипт примерно такой:

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