Я начал работать над своим первым проектом для Flatiron School, который представлял собой простое веб-приложение, извлекающее данные из БД коктейлей для возврата случайных коктейлей на основе пользовательского ввода через DOM.

Первоначально я разработал интерфейс таким образом, чтобы пользователь мог ввести свой предпочтительный дух в текстовое поле, и это текстовое значение будет добавлено к веб-адресу в вызове fetch. Очевидно, что это совсем не годится, так как было бы очень легко сломать приложение, просто набрав все, что они хотят, чтобы получить следующий несуществующий адрес:

fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=' + formInput.value)
fetch(‘https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=RandomTextRuiningMyApplication’)

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

Это повлекло за собой, во-первых, изменение моего HTML-кода для удаления тега ‹form›…

<form action="" method="get">
   <label for="spirit">Write your favorite spirit</label>
   <input type="text" id="spirit" name="spirit"><br><br>
   <input type="submit" id="submitted" value="Get a random recipe!"></form>

…и добавьте тег ‹select› и ‹button› для раскрывающегося списка.

<label for="spirit">Choose your favorite spirit</label>
   <select name="spirit-list" id="spirit-list">
   <option value="choose"></option>
   <option value="gin">Gin</option>
   <option value="vodka">Vodka</option>
   <option value="rum">Rum</option>
   <option value="tequila">Tequila</option>
   <option value="bourbon">Bourbon</option>
   <option value="scotch">Scotch</option>
   <option value="brandy">Brandy</option>
   </select>
   <button id="button">Get a random recipe!</button>

Следующим шагом было изменить мой код JavaScript, чтобы изменить захват переменных из формы…

const form = document.querySelector('form')
const formInput = document.querySelector("#spirit")
form.addEventListener('submit', fetchRecipeForm);

…на кнопку, убедившись, что прослушиватель событий срабатывает при событии click’, а не при submit’е.

const button = document.getElementById('button')
const buttonInput = document.querySelector("#spirit-list")
button.addEventListener('click', fetchRecipe)

Наконец, мне нужно немного изменить функцию выборки. Обратите внимание, что верхний фрагмент кода (функция, написанная для работы с исходной формой) содержит строку e.preventDefault(), которая используется для предотвращения перезагрузки браузера при отправке. В этом нет необходимости при использовании события «щелчок» на кнопке, и оно было исключено из нижнего фрагмента.

function fetchRecipeForm(e) {
   recipeDisplay.innerHTML = ''
   e.preventDefault();
   fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=' + formInput.value)
   .then(res => res.json())
   .then(displayRecipes)
}
function fetchRecipe() {
   recipeDisplay.innerHTML = ''
   fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=' + buttonInput.value)
   .then(res => res.json())
   .then(displayRecipes)
}

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