Почему не добавляется класс? Где ошибка?

Question

[DggMMmmm]

Не знаю где ошибка , и раньше я копировал в codepen код и в codepen работал и у меня нет , сейчас и здесь не работает. Помогите , спасибо.

https://codepen.io/hccode-21/pen/YzJNEPJ

Comments

[Elvis]

так добавляется же. только при потери фокуса наверно нужно убирать класс.

[AUser0]

Удивительно, но код на codepen работает именно так, как требуется.

[Ankhena]

Смотрите, в вашей песочнице всё работает
https://codepen.io/AnnaSummer/pen/WNaRXgR
Я лишь добавила обводку, чтобы это было очевидно.

А есть какое-то объяснение, зачем всё таки вы это делаете на js, а не используете css?
Вам же что-то типа этого нужно https://qna.habr.com/q/1272730#answer_2319398?

[DggMMmmm]

Ankhena, Я новенький в сфере и не знаю много , спасибо :*

[Ankhena]

DggMMmmm, я в прошлый раз писала вам про псевдокласс :focus-within, который заменит вам этот js. И вы вроде согласились.
Поэтому, чтобы как-то нормально вам помогать, нужно понимать чем решение на css не подходит.

[DggMMmmm]

Ankhena, Я хотел когда текст в инпут то не отпускалось лабел , и чтобы по отдельности когда нажимаешь на инпут , чтобы срабатывал тот в который ты нажимаешь , а не все. Ну вроде я зделал что то но не идет ( https://codepen.io/hccode-21/pen/YzJNEPJ

[Ankhena]

DggMMmmm, мой ответ по ссылке выше начинается со слов о том, что в инпуте забыл атрибут placeholder.
А он должен быть, чтобы работал :placeholder-shown. Хотя бы с неразрывным пробелом внутри.
А ещё лучше с нормальным текстом, просто прозрачным.

[DggMMmmm]

Ankhena, Я потом видел и исправил , все идет как по маслу , без вас я бы еще стоял несколько суток и не понимал че здесь такого xD
Спасибо большое.

[Ankhena]

DggMMmmm, о, ура, отлично!