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

Question

[nikivinn]

Вот собственно скрипт:

<script>
document.addEventListener("DOMContentLoaded", function() {
let c = document.getElementById(".chosen-value");
let u = document.getElementById(".chosen-value-new");
let g = document.getElementById(".chosen-value-gru");
c.addEventListener("keyup", function () {
  
  if (c.value == "") {
    u.disabled = true;
	g.disabled = true;
  } 
  
  else if (c.value == "МОСКВА") {
    u.disabled = false;
  }
  
	});
});
</script>

Который был взят вот отсюда:
https://codepen.io/anon/pen/oMGjGB

Вот моя ошибка: "Uncaught TypeError: Cannot read property 'addEventListener' of null"

И вот непосредственно весь мой код:
https://codepen.io/nikivinn/pen/KKgKbzR

Что делать и почему ошибка ? :(

Comments

[Kovalsky]

"let c = document.getElementById(".chosen-value")" - вот это выражение что делает?

[nikivinn]

Kovalsky, получает значение вот отсюда:

<input class="chosen-value" id="chosen-value" type="text" value="" placeholder="Выберите Город" autocomplete="off">

[Kovalsky]

nikivinn, выведите значение переменной c в консоль, посмотрите что там

[nikivinn]

Kovalsky,
Я до сих пор плаваю в JS, мог затупить в очень глупом лёгком месте.

[Kovalsky]

nikivinn, выражение "document.getElementById(".chosen-value")" возвращает элемент у которого идентификатор равен ".chosen-value" (без кавычек). В вашей разметке нету элемента с идентификатором ".chosen-value"

[nikivinn]

Kovalsky,

[Kovalsky]

Ага, вижу класс "chosen-value" и идентификатор "chosen-value", ни класса ни идентификатора ".chosen-value" не вижу

[nikivinn]

Kovalsky, Да, спасибо ошибка ушла)
Я видимо спутал с document.querySelector , там если не ошбаюсь как раз с точкой нужно писать.

p.s. единственное теперь не пойму почему они до сих пор не открываются(инпуты) и в консоле после всего до сих пор c = undefined как на скрине выше... я уже который час бьюсь))

[nikivinn]

Kovalsky,

<script>
document.addEventListener("DOMContentLoaded", function() {
let c = document.getElementById("chosen-value");
let u = document.getElementById("chosen-value-new");
let g = document.getElementById("chosen-value-gru");
console.log(c,u,g);
c.addEventListener("keyup", function () {
  if (c.value == "") {
    u.disabled = true;
	g.disabled = true;
  } 
  else if (c.value == "МОСКВА") {
    u.disabled = false;
  }
	});
});
</script>

Скрипт теперь выглядит так)

[Kovalsky]

nikivinn, ну хз. Открыл ваш пример, убрал точки из getElementById, вывожу в консоль переменную c, вижу в консоли нужный элемент, то есть всё работает

[nikivinn]

Kovalsky, кодпэн, кодпэном, но вот когда пробуешь локально и на хостинге, не работает :(

[nikivinn]

Kovalsky, neversuffer6.000webhostapp.com/#first (залил временно на хостинг)
Как вы поняли суть в том, чтобы INPUT'ы следующие не открывались пока не выбрано в первом (чтобы сделать зависимость, мол выбрал МОСКВА --> Открываются нужные ВУЗЫ --> выбираешь нужный ВУЗ --> далее открывается инпут с ГРУППАМИ --> выбираешь нужную ГРУППУ

Теперь ошибки конечно нет, но так сказать последовательность инпутов так и не работает...