У меня проблема с изменением цвета формы в HTML с помощью js и css [закрыто] ⇐ CSS

[Anonymous]

У меня есть код HTML и JS. Я думаю, это работает хорошо и не имеет никакого отношения к проблеме.

Я думаю, проблема в CSS-коде. Раздел form с настройкой цвета фона.

Я хочу использовать JS, чтобы изменить цвет формы в коде, который вы видите, я пробовал, но при запуске кода и нажатии кнопки ничего не происходит.

Я хочу, чтобы кнопка меняла цвет формы.

const button = document.querySelector('button'); const form = document.getElementById('form1'); button.addEventListener('click', () => { form.classList.toggle('js-control-color'); button.textContent = form.classList.contains('js-control-color')? «Изменить на черный»: «Изменить на белый»; }); body { фоновое изображение: url('../../pic/login.jpg'); семейство шрифтов: Arial, без засечек; маржа: 0; заполнение: 0; дисплей: гибкий; гибкое направление: столбец; высота: 100вх; /* Убедитесь, что высота занимает всю область просмотра */ размер фона: обложка; /* Растягиваем изображение, чтобы охватить всю область */ фоновая позиция: центр; /* Центрируем изображение по горизонтали и вертикали */ фоновый повтор: без повтора; /* Предотвратить повторение изображения */ } /* Стили панели навигации */ навигация { цвет фона: #333; переполнение: скрыто; } навигация { плыть налево; дисплей: блок; белый цвет; выравнивание текста: по центру; отступ: 14 пикселей 16 пикселей; текстовое оформление: нет; } навигация а: наведите { цвет фона: #ddd; черный цвет; } /* Стили формы */ форма { цвет фона: белый; отступ: 20 пикселей; радиус границы: 8 пикселей; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); поле: 20 пикселей авто; /* Центрируем форму по горизонтали */ ширина: 300 пикселей; } /* Класс для изменения цвета под управлением JavaScript */ .js-контролируемый-цвет { цвет фона: черный; /* Исходный цвет */ } сформировать метку { дисплей: блок; нижнее поле: 8 пикселей; начертание шрифта: жирный; } ввод формы { ширина: расчет (100 % – 16 пикселей); отступ: 8 пикселей; поле внизу: 16 пикселей; размер коробки: граница-коробка; граница: 1 пиксель, сплошная #ccc; радиус границы: 4 пикселя; } форма .gender-options { дисплей: гибкий; оправдание-содержание: гибкий старт; /* Скорректировано начало слева */ выровнять-элементы: по центру; } форма метки .gender-options { поле справа: авто; /* Скорректированная маржа */ } ввод формы[type="submit"], форма input[type="reset"] { цвет фона: #4caf50; цвет: #fff; отступ: 10 пикселей; граница: нет; радиус границы: 4 пикселя; курсор: указатель; } /* Класс для изменения цвета под управлением JavaScript */ .js-контролируемый-цвет { цвет фона: черный; /* Исходный цвет */ } /* Добавьте этот стиль в свой файл login.css */ ввод[тип="дата"] { ширина: расчет (100 % – 16 пикселей); /* Корректируем по мере необходимости */ отступ: 8 пикселей; поле внизу: 16 пикселей; размер коробки: граница-коробка; граница: 1 пиксель, сплошная #ccc; радиус границы: 4 пикселя; } ввод формы[type="submit"]:наведите курсор, форма ввода[type="reset"]:hover { цвет фона: #45a049; } /* Добавьте этот стиль для кнопки регистрации */ .register-кнопка { дисплей: блок; маржа-верх: -2px; /* Корректируем по мере необходимости */ выравнивание текста: по центру; текстовое оформление: нет; цвет фона: #4caf50; цвет: #fff; отступ: 10 пикселей; радиус границы: 4 пикселя; ширина: 265 пикселей; /* Устанавливаем желаемую ширину */ } .register-button:hover { цвет фона: #45a049; Главная страница О программе Имя пользователя:

Пароль: Пол: Женский Мужской Дата рождения: Изменить цвет фона