Event Listeners and Select Tag!

While working on my first project for FlatIron School, I was using information from the public api, pokeapi. I wanted to create a webpage to be able to "select" a Pokemon and be able to see specific information about any Pokemon I chose. I had no idea about the tag in HTML, but in my head I knew that I wanted to see a drop down list on my page with all the Pokemon names and that if i clicked or hit enter on any name I wanted the page to do something. I knew i was going to have to add an event listener obviously somewhere, but where? So after some googling I learned about the select tag, easy enough I coded a drop down in my HTML file. But for the select tag to work as a dropdown list i had to create "options". Options are the choices that dropdown list displays, in my case it would be the Pokemon names. In my case it was more useful to dynamically code the options in my javascript file and then append them to the dropdown list, in this way I could use information from my fetch request to the api to populate the options. As you can see here data that its getting from the api, is then being to get Pokemon objects information, which information I'm then using to pass in as an argument to my createOptions function, which as my getAllPokemon() function operates, it iterates over a array of Pokemon objects and creates an option for each. This option is then appended to the drop down list in the createOptions() function.

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])
            })
        }

    }

Then all that was left was the question of where to add the event listener. For a while I thought that by adding an event listener to each individual option, then the webpage would be aware when that particular option was 'clicked' , see I was just thinking about the 'click' event. But then I wondered if there were any other event listener that might be more useful in this situation. By adding an event listener, with the 'change' event, to the select tag, which is the dropdown list, instead of each individual option, the event listener will run whenever there is a 'change' in the selected option from the dropdown list.

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

        const pokemon = pokemonObjects.find(pokemon => pokemon.name === event.target.value.toLowerCase()) 
                renderStats(pokemon)
            })

Interestingly enough as well, after the 'change' event listener has run, the dropdown menu remembers that the option that was changed to is currently selected, and I was able to access that information in other parts of my code with selectedIndex property of the dropdown list.

const option = dropDown.options[dropDown.selectedIndex].value

So as we see here dynamically creating the dropdown menu in this way gives me opportunity to use information from the api to create whichever options are relevant. And then by adding the 'change' event to the dropdown I can use that information from the option in various ways, that perhaps adding individual event listeners to the options might not. Having those option created in the javascript file and them having access to some of the variables that are in the javascript file, in my opinion made it really easy to be able to get the drop down list to act as it should, and to be able to use information from the objects that I had gotten from the API, made it really nice for the 'change' event to update the page with the accurate information.