Вспоминая 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.

Спасибо за чтение и счастливого кодирования!