MortSith
@MortSith

Как подправить JS код на переключателе, а то я тупой?

Что исправить чтобы при нажатии на второй переключатель менялся цвет Body, вот код ->>
https://jsfiddle.net/Mortsith777/hg8kbyxd/43/

querySelectorAll("input")[0]; без [0] не работает почему то, расжуйте плиз
  • Вопрос задан
  • 99 просмотров
Решения вопроса 2
lugindev
@lugindev
Потому что 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"]
  })
})
Ответ написан
Born2Lose
@Born2Lose
Frontend developer
querySelectorAll возвращает NodeList всеx найденный нод по селктору. В вашем случае в документе есть 2 ноды попадающие под искомый селектор - input.
Вы обращаетесь к первому элементу нодлиста через [0] и записываете метод onclick для 1-ого элемента. Тем самым игнорируя 2-ой элемент(2-ой инпут).
Для решения проблемы вам стоит проитерироваться по каждому инпуту нодлиста и добавить для него метод onclick.
Код:
const inputList = document.querySelectorAll("input");
inputList.forEach(input => {
  input.onclick = function() {
    if ((input.checked == true) && (input.value == "1")) {
      document.body.style.backgroundColor = "#00ff00";
    } else if ((input.checked == true) && (input.value == "2")) {
      document.body.style.backgroundColor = "#ccff00";
    } else {
      document.body.style.backgroundColor = "#03f3f3";
    }
  };
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы