Потому что
querySelectorAll возвращает nodeList (массив)
Можно записать все короче:
// Выберем все инпуты и превратим NodeList в обычный массив,
// чтобы можно было применять методы массива
// [...] - деструктуризация
const inputs = [...document.querySelectorAll("input")]
// Определим объект с цветами "0" - если ничего не выбрано
// Остальные совпадают с value
const colors = {
"0": "#03f3f3",
"1": "#00ff00",
"2": "#ccff00"
}
inputs.forEach(input => {
// пройдемся циклом по всем инпутам
input.addEventListener('click', () => {
// Добавим обработчик на каждый инпут
// inputs.some(i => i.checked) - проверка есть ли хоть один инпут cheсked
// если нет цвет для body по ключу "0"
// если есть по ключу input.value ("1"|"2")
document.body.style.backgroundColor = inputs.some(i => i.checked)
? colors[input.value]
: colors["0"]
})
})
