Слушатели событий и тег Select!

Работая над своим первым проектом для FlatIron School, я использовал информацию из публичного api, pokeapi. Я хотел создать веб-страницу, на которой можно было бы «выбрать» покемона и посмотреть конкретную информацию о любом покемоне, которого я выбрал. Я понятия не имел о тегах HTML, но в голове я знал, что хочу видеть на странице выпадающий список со всеми именами покемонов, и что если я нажму или введу любое имя, я хочу, чтобы страница что-то сделала. Я знал, что мне придется где-то добавить слушателя событий, но где? Погуглив, я узнал о теге select, и достаточно легко закодировал выпадающий список в своем HTML-файле. Но чтобы тег select работал как выпадающий список, я должен был создать «опции». Опции — это варианты, которые отображаются в выпадающем списке, в моем случае это имена покемонов. В моем случае было полезнее динамически создать опции в файле javascript, а затем добавить их в выпадающий список, таким образом я мог использовать информацию из моего fetch-запроса к api для заполнения опций. Как вы можете видеть, данные, полученные от api, используются для получения информации об объектах Pokemon, которую я передаю в качестве аргумента в функцию createOptions, которая, как и функция getAllPokemon(), перебирает массив объектов Pokemon и создает опцию для каждого из них. Затем этот вариант добавляется в выпадающий список в функции createOptions().

fetch('https://pokeapi.co/api/v2/pokemon?offset=0&limit=150')
    .then(res => res.json())
    .then(function (data) {
        getAllPokemon(data)
    })

    function getAllPokemon(data) {
        const pokemons = data['results']
        for (const pokemon of pokemons) {
            fetch(pokemon.url)
            .then(res => res.json())
            .then(function (data) {
                createOptions(data)
                pokemonObjects.push(data)
                renderStats(pokemonObjects[0])
            })
        }

    }
Вход в полноэкранный режим Выход из полноэкранного режима

Затем остался лишь вопрос о том, куда добавить слушателя событий. Некоторое время я думал, что если добавить слушатель событий для каждого отдельного варианта, то веб-страница будет знать, когда этот конкретный вариант «щелкнут», т.е. я думал только о событии «щелчок». Но затем я задался вопросом, есть ли другие слушатели событий, которые могут быть более полезны в этой ситуации. Добавив слушатель событий с событием ‘change’ к тегу select, который является выпадающим списком, вместо каждого отдельного варианта, слушатель событий будет запускаться каждый раз, когда происходит «изменение» выбранного варианта из выпадающего списка.

dropDown.addEventListener('change', function (event) {

        const pokemon = pokemonObjects.find(pokemon => pokemon.name === event.target.value.toLowerCase()) 
                renderStats(pokemon)
            })
Вход в полноэкранный режим Выход из полноэкранного режима

Интересно, что после запуска слушателя события ‘change’, выпадающее меню запоминает, что опция, которая была изменена, выбрана в данный момент, и я смог получить доступ к этой информации в других частях моего кода с помощью свойства selectedIndex выпадающего списка.

const option = dropDown.options[dropDown.selectedIndex].value
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, как мы видим, динамическое создание выпадающего меню таким образом дает мне возможность использовать информацию из api для создания нужных опций. А затем, добавив событие ‘change’ к выпадающему меню, я могу использовать эту информацию из опции различными способами, которые, возможно, не позволят добавить отдельные слушатели событий к опциям. Наличие этих опций, созданных в файле javascript, и доступ к некоторым переменным, находящимся в файле javascript, на мой взгляд, очень упростило задачу заставить выпадающий список действовать так, как нужно, а возможность использовать информацию из объектов, которую я получил из API, позволила событию ‘change’ обновить страницу с точной информацией.

Оцените статью
Procodings.ru
Добавить комментарий