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

Question

[MortSith]

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

querySelectorAll("input")[0]; без [0] не работает почему то, расжуйте плиз

Answer 1

[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"]
  })
})

Comments

[MortSith]

а если я хочу чтобы когда они оба включены цвет был бы черный, то как тогда ?

[lugindev]

MortSith,

[MortSith]

lugindev, спасибо), но нашел баг: если сначала оба включить, а потом один выключить остается неправильный цвет

[lugindev]

MortSith,
Тогда так, но если прибавится еще инпут опять все переписывать)

Answer 2

[Валерий]

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";
    }
  };
})

Comments

[WbICHA]

Почему нельзя было написать код красиво?

const inputList = document.querySelectorAll("input");
inputList.forEach(input => {
  input.addEventListiner('click', () => {
    let color = '#03f3f3';
    
    if(input.checked) {
      switch(input.value) {
        case '1':
          color = '#00ff00';
        case '2':
          color = '#ccff00';
      }
    }
    
    document.body.style.backgroundColor = color;
  });
})

[Валерий]

WbICHA, Я решил оставить это автору вопроса. Ведь, пока сам не поймешь, что код "некрасивый", никогда не отрефакторишь.

[WbICHA]

Валерий, это не так работает. Если человеку не привить красоту, то и придерживаться красоты он маловероятно, что станет.
И это касается не только кода, но и реальной жизни.

[Валерий]

WbICHA, Для меня это всегда работает так. Пока сам не поймешь, что твой код гав*о, ничего делать с ним и не будешь. А если будешь развиваться и набираться опыта, то чувство прекрасного и придет само.