Вспоминая 3 месяца назад, я не мог понять, чем я собираюсь поделиться с вами сегодня. Как младший инженер-программист с опытом работы с ванильным JavaScript менее года, я очень впечатлен тем, чего добился.
Функция сброса была взята из проекта фазы 1, который я только что завершил для школы Flatiron. Этот подход сбросит не только входные данные, но и результаты. Давайте углубимся!
Требования:
Базовые знания:
Инструменты:
Для начала нам понадобится стандартный HTML-шаблон.
в VSCode типа:
!
Затем выберите «!» из вариантов. Вы должны увидеть следующее:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Потрясающий! Полный вперед! Обновим ‹head›. Нам понадобится bootstrap для стилизации ИЛИ вы можете создать свой собственный стиль. Bootstrap ускорил процесс разработки, поскольку эта функция сброса фактически была взята из MVP.
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel=”stylesheet” integrity=”sha384–1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”> </script> <link rel=”stylesheet” href=”./assets/css/styles.css”> <script src=”./assets/js/app.js” defer></script>
Теперь у нас должно получиться что-то вроде следующего:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <title>Document</title> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel=”stylesheet” integrity=”sha384–1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script> <link rel=”stylesheet” href=”./assets/css/styles.css”> <script src=”./assets/js/app.js” defer></script> </head> <body> </body> </html>
Далее давайте добавим нашу форму поиска и кнопку сброса с помощью Bootstrap.
<div class="d-grid gap-2 d-lg-flex justify-content-lg-center"> <form id="form-2" class="d-flex"> <input id="searchCoinID2" class="form-control me-2" type="search" placeholder="Search" aria-label="Search" required> <button class="btn btn-outline-primary" type="submit">Search</button> </form> <button id="resetButton" class="btn btn-outline-primary" type="submit" onclick="resetSearch()">Reset</button> </div>
Обратите внимание на функцию прослушивания событий щелчка, которую мы вызываем?
onclick=”resetSearch()”
Всякий раз, когда пользователь нажимает кнопку сброса, он вызывает функцию resetSearch(), расположенную в вашем файле JavaScript, для выполнения задачи.
В вашем файле JavaScript мы напишем следующее:
const resetSearch = () => {}
Внутри фигурных скобок дважды нажмите Enter.
const resetSearch = () => { }
Далее мы создадим переменную внутри только что созданной функции и дадим ей имя «resetButton». Мы хотим настроить таргетинг на кнопку сброса и прослушивать событие щелчка. Поэтому мы должны присвоить значение нашей переменной.
const resetButton = document.getElementById('resetButton');
Далее мы собираемся создать наш прослушиватель событий. Во-первых, мы используем только что созданную переменную и добавляем к ней прослушиватель событий, а также указываем, что следует прослушивать.
resetButton.addEventListener('click', () => {})
Выше мы в основном создали стрелочную функцию. В фигурных скобках мы должны указать, что должно произойти, когда пользователь инициирует это событие.
Мы создадим еще одну переменную и нацелим ее на идентификатор результата поиска в HTML-документе.
const searchResults = document.getElementById('searchResults')
Затем мы используем переменную и присваиваем innerHTML пустую строку.
ПРИМЕЧАНИЕ: innerHTML — это плохая практика. Пожалуйста, избегайте его использования любой ценой.
searchResults.innerHTML = " ";
Затем мы хотим иметь возможность сбросить ввод поиска. Последняя строка кода для достижения этого:
const form2 = document.getElementById('form-2').reset()
Выше мы создали еще одну переменную и присвоили ей идентификатор элемента «form-2». Однако, чтобы заставить его работать, мы просто добавляем следующее:
.reset()
Теперь у нас должно получиться что-то вроде этого:
const resetSearch = () => { const resetButton = document.getElementById('resetButton'); resetButton.addEventListener('click', () => { const searchResults = document.getElementById('searchResults') searchResults.innerHTML = " "; const form2 = document.getElementById('form-2').reset() })}
Ваш окончательный результат должен выглядеть как эта живая демо.
Полностью проект можно посмотреть на GitHub.
Спасибо за чтение и счастливого кодирования!