Добавить событие click

@noname12345 · Регистрация: 01.11.2017

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

Отладчик не ругается на addEventListener, не может прочитать как я понял, подскажите как решить проблему?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>БД  «Студент»</title>
  <link href="C:\Users\sonyf\Desktop\JSBD\styles.css" rel="stylesheet">
</head>
<body>
<h1> БД  «Студент» </h1> 
<input type="button" class="ButtonHideForm" value="Скрыть форму" />
<div class = "SendForm">
    <form action="URL" method="POST">
    <fieldset>
    <legend>Ввод данных</legend>
 
    <label for="FullName">ФИО студента:</label><br>
    <input type ="text" name = "FullName" placeholder="Введите своё ФИО"></input><br>
 
    <label for="YearOfBirth">Год рождения:</label><br>
    <input type ="number" name = "YearOfBirth" placeholder="Введите дату рождения"></input><br>
 
    <label for="HomeAddress">Домашний адрес:</label><br>
    <input type ="text" name = "HomeAddress" placeholder="Введите свой адрес проживания"></input><br>
 
    <label for="Faculty">Факультет:</label><br>
    <input type ="text" name = "Faculty" placeholder="Введите свой факультет"></input><br>
 
    <label for="Specialty">Специальность:</label><br>
    <input type ="text" name = "Specialty" placeholder="Введите свою специальность"></input><br>
 
    <label for="Course">Курс:</label><br>
    <input type ="text" name = "Course" placeholder="Введите свой курс"></input><br>
    
    <label for="lnstitution">Учебное заведение:</label><br>
    <input type ="text" name ="lnstitution"placeholder="Введите свой вуз"></input><br>
 
    <input type="submit" value="Отправить">
    </legend>
    </fieldset>
    </form>
    </div>
<script src="C:\Users\sonyf\Desktop\JSBD\external.js"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.SendForm{
    display: flex;
    justify-content: center;
 
}
 
input {
    margin: 5px;
    width: 250px;
    border-radius: 3px;
}
 
h1 {
    background: yellow;
    text-align: center;
}
 
.ButtonHideForm{
    border-radius: 10px;
    background: yellow;
    width: 130px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const buttonHideForm = document.getElementsByClassName('ButtonHideForm');
const sendForm = document.getElementsByClassName('SendForm');
 
 
buttonHideForm.addEventListener("click", () => {
    
    if (sendForm.style.display == 'flex') {
        sendForm.style.display = 'none';
        sendForm.style.value = "Показать форму";
        }
    
    else{
        sendForm.style.display = 'flex';
        sendForm.style.value = "Скрыть форму";
    }
})

@sash23 · 19.03.2019, 21:14

Может лучше первую строчку так

JavaScript
1
const buttonHideForm = document.querySelector('.ButtonHideForm');

@amr-now · 20.03.2019, 07:33

Исправления ошибок:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>БД  «Студент»</title>
  <link href="styles.css" rel="stylesheet"> <!-- Был кривой путь -->
</head>
<body>
<h1> БД  «Студент» </h1> 
<input type="button" class="ButtonHideForm" value="Скрыть форму" />
<div class = "SendForm">
    <form action="URL" method="POST">
    <fieldset>
    <legend>Ввод данных</legend>
 
    <label for="FullName">ФИО студента:</label><br>
    <input type ="text" name = "FullName" placeholder="Введите своё ФИО"></input><br>
 
    <label for="YearOfBirth">Год рождения:</label><br>
    <input type ="number" name = "YearOfBirth" placeholder="Введите дату рождения"></input><br>
 
    <label for="HomeAddress">Домашний адрес:</label><br>
    <input type ="text" name = "HomeAddress" placeholder="Введите свой адрес проживания"></input><br>
 
    <label for="Faculty">Факультет:</label><br>
    <input type ="text" name = "Faculty" placeholder="Введите свой факультет"></input><br>
 
    <label for="Specialty">Специальность:</label><br>
    <input type ="text" name = "Specialty" placeholder="Введите свою специальность"></input><br>
 
    <label for="Course">Курс:</label><br>
    <input type ="text" name = "Course" placeholder="Введите свой курс"></input><br>
    
    <label for="lnstitution">Учебное заведение:</label><br>
    <input type ="text" name ="lnstitution"placeholder="Введите свой вуз"></input><br>
 
    <input type="submit" value="Отправить">
    </legend>
    </fieldset>
    </form>
    </div>
<script src="external.js"></script> <!-- Был кривой путь -->
</body>
</html>

external.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const buttonHideForm = document.querySelector('.ButtonHideForm'); // Был кривой селектор
const sendForm = document.querySelector('.SendForm'); // Был кривой селектор
 
buttonHideForm.addEventListener("click", () => {
    if (sendForm.style.display !== 'none') { // Конфликт изначально неопределенного стиля непосредственно в атрибуте элемента, приходилось нажимать кнопку дважды
        sendForm.style.display = 'none';
        buttonHideForm.value = "Показать форму";  // Ничто не указывало на кнопку
    }
 
    else {
        sendForm.style.display = ''; // Стереть в атрибуте none, стиль будет браться из внешнего файла
        buttonHideForm.value = "Скрыть форму"; // Ничто не указывало на кнопку
    }
})

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

Добавить событие click

Решение