.classList is undefined

@Hotsoli · Регистрация: 10.03.2023

Студворк — интернет-сервис помощи студентам

Всем привет.
В коде у меня должен быть элемент, который имеет два режима отображения - в одном у него один сласс css и один набор обьектов внутри, а в другом режиме у него другой класс css и набор обьектов. И в том и в том виде у меня есть кнопки переключения режима отображения, и при нажатии на них у меня есть ошибка в строке переключения класса у материнского обьекта. Пишет наименование переменной js и ".classList is undefined"

прикрепил архив с файлами, ибо код слишком велик и форум обрезает его.
заметки - 2.1.7z

[HTML]

<html>

<head>

<link href="pr-01-css.css" rel="stylesheet">

</head>

<body>
<div style="position:absolute;min-width:1278px;min-height:673px;width:calc(10px + ( 100% - 12px ));height:calc(10px + ( 100% - 12px ));border: 1px solid black;">


<div class=' block_menu ' style="position:absolute;background:#E4E FD1;border: 1px solid black;">
<button class=' block_menu___button_zadachi block_menu___button_tipic ' style="background:#C2F095;border: 1px solid black;"> задачи </button>
<button class=' block_menu___button_zametki block_menu___button_tipic ' style="background:#C2F095;border: 1px solid black;"> заметки </button>
<button class=' block_menu___button_copeiki block_menu___button_tipic ' style="background:#C2F095;border: 1px solid black;"> копейки </button>

</div>


<div class=' block_zadachi ' style="display: block ;overflow: visible;position:absolute;top:35px;backg round:#eee;border: 1px solid black;">


<div class=' block_zadachi___block_poisck ' style="position:absolute;background:#E4E FD1;border: 1px solid black;">


<input class=' block_zadachi___block_poisck___pole_pois ka ' style="position:absolute;background:#C2F 095;border: 1px solid black;"></input>


<button class=' block_zadachi___block_poisck___button_po isck ' style="position:absolute;left:119;backgr ound:#C2F095;border: 1px solid black;">

krvsa · 15.03.2023, 15:10

Сообщение от Hotsoli

Пишет наименование переменной js и ".classList is undefined"

Так ты выведи в консоль то, к чему применяешь тот classList...

KingdaKa · 15.03.2023, 15:35

JavaScript
1
2
        el_1_1.style.display = 'visible';
        el_1_1.style.display = 'visible';

JavaScript
1
2
        el_1_1.style.display = 'none';
        el_1_1.style.display = 'none';

Для надёжности шоб наверняка?

@klyapa · 15.03.2023, 15:37

Сообщение от krvsa

Так ты выведи в консоль то, к чему применяешь тот classList...

Я уже вывел... Применяет к коллекции getElementsByClassName

Hotsoli, кто вас научил такие дикие классы элементам давать? Не дружите с ним. Кроме того, что вы ищите classList в коллекции, где его нет по определению, вы в функции hide_zadacha_zadacha ищите элемент с несуществующим классом, и в этой же функции, ниже, в условии, пытаетесь добавить тот же класс ненайденному элементу. ТрешЪ, в общем, полный.

krvsa · 15.03.2023, 16:17

Не по теме:

Сообщение от klyapa

кто вас научил такие дикие классы элементам давать?

Чем длиннее идентификатор - тем круче разработчик! :-D

@DrType · 15.03.2023, 17:28

Не по теме:

Это по БЭМ!! :)

@klyapa · 15.03.2023, 17:56

Не по теме:

Сообщение от DrType

Это по БЭМ!! :)

Ну реальный скам кто-то придумал ) ... Самого кода 20 строчек, но зато с классами: "прикрепил архив с файлами, ибо код слишком велик" ))

@Hotsoli · 16.03.2023, 13:48 **[ТС]**

я проверил, и он вывел ровно тот div, который мне был необходимо отредактировать командой.

Добавлено через 15 минут
1. имена - просто учусь пока что, и что бы не запутаться в собственном коде делаю названия переменных как пути файлов.
2. я не совсем понял вас, о какой колекции идёт речь, но...
в строке 21 я УДАЛЯЮ класс, по которому я и нашёл этот обьект. (окончание на "2"), а в строке 26 я тому же элементу добавляю другой класс (оконччание "1")
А вот в строке 35 я уже да, именно добавляю класс с окончанием "2", удаляя класс "1", но по скольку сценарий строки 33+ идёт только при другой сценарии, то и в переменной находится тот обьект после того как я его нашёл по другому классу, который был у него ибо было другое "состояние".
3. На счёт поиска несуществующего класса и прибавления ненайденному обьекту этого класса - у меня обьект имеет два класса (различия в окончании "1" и "2"), описывающие два его состояния. В самом начале я этот обьект ищу по одному классу, а несколько строк ниже уже по другому. Таким образом он у меня будет найден в любом из этих двух состояний. И да, я знаю что не лучший способ, но я это понял только сегодня.

Добавлено через 32 секунды
ну у меня раньше и меньший код обрезало до 36 строк
а тут кода раза в 2 больше и в js и в html

krvsa · 16.03.2023, 14:35

Сообщение от Hotsoli

я проверил, и он вывел ровно тот div, который мне был необходимо отредактировать командой

Вывод выводу рознь... Это все по проблеме "отсутствия" .classList?

PHP/HTML
1
2
3
4
5
6
7
<p>Test</p>
 
<script>
console.log(document.querySelector('p'))
console.log(document.getElementsByTagName('p'))
 
</script>

@Hotsoli · 16.03.2023, 15:41 **[ТС]**

ну да, по ней.
а что за код? к чему он...?

@klyapa · 16.03.2023, 16:55

Сообщение от Hotsoli

а что за код? к чему он...?

Это просто пример того, что "Вывод выводу рознь...". В первом случае вы получаете сам элемент, а во втором коллекцию, у которой совсем другие свойства и характеристики.

Hotsoli, т.к. речь идёт только о переключении класс[а/ов], то ваша задача не просто "простая", а примитивная и решается в одну строку методом toggle(), если бы не ваши километровые классы. Да хрен с ними, с классами, если вам так удобнее, то пусть будут такими, но зачем вы ещё и стили в элементах пишите, доводя разметку до абсурда? У вас же есть css-файл, туда и выносите все стили.

@Hotsoli · 17.03.2023, 11:48 **[ТС]**

часть css проще наблюдать в обьекте, особенно пока редачишь внешность и не уверен в ней.
но вопрос то в том, как мне исправить ошибку

@klyapa · 17.03.2023, 16:23

Сообщение от Hotsoli

но вопрос то в том, как мне исправить ошибку

Вам же посоветовали в консоли посмотреть. На странице нет элемента с классом block_zadachi___block_zadachi___zadachi_spisok___zadacha_tipical_1, поэтому в переменную возвращается пустая коллекция...

JavaScript
1
const el_1_0 = document.getElementsByClassName('block_zadachi___block_zadachi___zadachi_spisok___zadacha_tipical_1');

... или null, если использовать document.querySelector() И вот это сразу приводит к ошибке...

JavaScript
1
el_1_0.classList.add('block_zadachi___block_zadachi___zadachi_spisok___zadacha_tipical_1'); // Uncaught TypeError

У меня аж в глазах зарябило и подташнивать начало, когда разбирался с вашим классовым калом. Вы уж измените подход к написанию классов, а то реально ущерб здоровью приносит.

@Hotsoli · 20.03.2023, 11:12 **[ТС]**

в классом block_zadachi___block_zadachi___zadachi_ spisok___zadacha_tipical_1 нет, но есть с классом block_zadachi___block_zadachi___zadachi_ spisok___zadacha_tipical_2, а в переменную я ввожу в том числе и при наличии этого класса. Или при повторном заполнении оно заполняет пустотой, если ничего не найдено, а не сохраняет значение которое было до заполнения не найденным?
проверил, сделав что у этого обьекта есть еще один класс, постоянный. Нахожу обьект при помощи этого класса, а не переключаемого. Но по любому есть та же самая ошибка, хотя сейчас я заполняю переменную по классу который 100% есть.

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

@klyapa · 20.03.2023, 19:01

Сообщение от Hotsoli

в классом block_zadachi___block_zadachi___zadachi_ spisok___z adacha_tipical_1 нет, но есть...

Да какая разница, что там у вас есть дальше, если на этом пункте выскакивает ошибка...

Ладно, чтобы у меня голова не закружилась от ваших классов, вот вам пример вашей задачи и решения. Если у одного элемента есть один класс и нет другого, то удаляем один и добавляем другой класс. То же самое со вторым элементом. По сути, происходит взаимная перестановка классов у двух элементов, по клику.

CSS
1
2
.hide { display: none; }
.show { display: block; }

HTML5
1
2
3
<p class="hide">первый</p>
<p class="show">второй</p>
<button class="btn">кнопка</button>

JavaScript
1
2
3
4
5
const [p1, p2, btn] = ['hide', 'show', 'btn'].map(cls => document.querySelector(`.${cls}`));
 
btn.addEventListener('click', () => {
    [p1, p2].forEach(p => ['hide', 'show'].forEach(cls => p.classList.toggle(cls)));
});

@Hotsoli · 21.03.2023, 11:52 **[ТС]**

видимо чат гпт в этом случае мне бы помог лучше

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Hotsoli 0 / 0 / 0 Регистрация: 10.03.2023 Сообщений: 13

	.classList is undefined 15.03.2023, 14:17. Показов 1257. Ответов 15 Метки classlist (Все метки) Всем привет. В коде у меня должен быть элемент, который имеет два режима отображения - в одном у него один сласс css и один набор обьектов внутри, а в другом режиме у него другой класс css и набор обьектов. И в том и в том виде у меня есть кнопки переключения режима отображения, и при нажатии на них у меня есть ошибка в строке переключения класса у материнского обьекта. Пишет наименование переменной js и ".classList is undefined" прикрепил архив с файлами, ибо код слишком велик и форум обрезает его. заметки - 2.1.7z [HTML] <html> <head> <link href="pr-01-css.css" rel="stylesheet"> </head> <body> <div style="position:absolute;min-width:1278px;min-height:673px;width:calc(10px + ( 100% - 12px ));height:calc(10px + ( 100% - 12px ));border: 1px solid black;"> <!-- меню сайта всё --> <div class=' block_menu ' style="position:absolute;background:#E4E FD1;border: 1px solid black;"> <button class=' block_menu___button_zadachi block_menu___button_tipic ' style="background:#C2F095;border: 1px solid black;"> задачи </button> <button class=' block_menu___button_zametki block_menu___button_tipic ' style="background:#C2F095;border: 1px solid black;"> заметки </button> <button class=' block_menu___button_copeiki block_menu___button_tipic ' style="background:#C2F095;border: 1px solid black;"> копейки </button> </div> <!-- меню задачи --> <div class=' block_zadachi ' style="display: block ;overflow: visible;position:absolute;top:35px;backg round:#eee;border: 1px solid black;"> <!-- поиск \| меню задачи --> <div class=' block_zadachi___block_poisck ' style="position:absolute;background:#E4E FD1;border: 1px solid black;"> <!-- поле поиска \| поиск \| меню задачи --> <input class=' block_zadachi___block_poisck___pole_pois ka ' style="position:absolute;background:#C2F 095;border: 1px solid black;"></input> <!-- кнопка поиска \| поиск \| меню задачи --> <button class=' block_zadachi___block_poisck___button_po isck ' style="position:absolute;left:119;backgr ound:#C2F095;border: 1px solid black;"> 0

@DrType
	15.03.2023, 17:28
	Не по теме: Это по БЭМ!! :) 0

@Hotsoli 0 / 0 / 0 Регистрация: 10.03.2023 Сообщений: 13
	16.03.2023, 13:48 [ТС]
	я проверил, и он вывел ровно тот div, который мне был необходимо отредактировать командой. Добавлено через 15 минут 1. имена - просто учусь пока что, и что бы не запутаться в собственном коде делаю названия переменных как пути файлов. 2. я не совсем понял вас, о какой колекции идёт речь, но... в строке 21 я УДАЛЯЮ класс, по которому я и нашёл этот обьект. (окончание на "2"), а в строке 26 я тому же элементу добавляю другой класс (оконччание "1") А вот в строке 35 я уже да, именно добавляю класс с окончанием "2", удаляя класс "1", но по скольку сценарий строки 33+ идёт только при другой сценарии, то и в переменной находится тот обьект после того как я его нашёл по другому классу, который был у него ибо было другое "состояние". 3. На счёт поиска несуществующего класса и прибавления ненайденному обьекту этого класса - у меня обьект имеет два класса (различия в окончании "1" и "2"), описывающие два его состояния. В самом начале я этот обьект ищу по одному классу, а несколько строк ниже уже по другому. Таким образом он у меня будет найден в любом из этих двух состояний. И да, я знаю что не лучший способ, но я это понял только сегодня. Добавлено через 32 секунды ну у меня раньше и меньший код обрезало до 36 строк а тут кода раза в 2 больше и в js и в html 0

@Hotsoli 0 / 0 / 0 Регистрация: 10.03.2023 Сообщений: 13
	16.03.2023, 15:41 [ТС]
	ну да, по ней. а что за код? к чему он...? 0

@Hotsoli 0 / 0 / 0 Регистрация: 10.03.2023 Сообщений: 13
	17.03.2023, 11:48 [ТС]
	часть css проще наблюдать в обьекте, особенно пока редачишь внешность и не уверен в ней. но вопрос то в том, как мне исправить ошибку 0

@Hotsoli 0 / 0 / 0 Регистрация: 10.03.2023 Сообщений: 13
	20.03.2023, 11:12 [ТС]
	в классом block_zadachi___block_zadachi___zadachi_ spisok___zadacha_tipical_1 нет, но есть с классом block_zadachi___block_zadachi___zadachi_ spisok___zadacha_tipical_2, а в переменную я ввожу в том числе и при наличии этого класса. Или при повторном заполнении оно заполняет пустотой, если ничего не найдено, а не сохраняет значение которое было до заполнения не найденным? проверил, сделав что у этого обьекта есть еще один класс, постоянный. Нахожу обьект при помощи этого класса, а не переключаемого. Но по любому есть та же самая ошибка, хотя сейчас я заполняю переменную по классу который 100% есть. На счет того, как у меня классы называются - извините, но я пока что не умею по другому ,ибо теряюсь моментально. 0

@Hotsoli 0 / 0 / 0 Регистрация: 10.03.2023 Сообщений: 13
	21.03.2023, 11:52 [ТС]
	видимо чат гпт в этом случае мне бы помог лучше 0

.classList is undefined

Решение