Watch This Week’s Episode On Our YouTube Channel

Video Transcript

Welcome to Learn, Love, Live, Code – a show where I teach short coding tutorials in 5 minutes or less! This week, I will walk you through updating a series of dropdowns removing values that have already been selected, disabling a button until at least 2 options are selected, and adding a refresh button.
The code for the static web page we will begin with in this lesson is the code we ended with last week. You can get the code from the transcript of this episode on my blog at HoffsTech.com/learnlovelivecode. The links for all of these things are also in the description for your convenience!

First, we need to remove the heroesArray and related variables from the sortHeroes function. Now we’re going to build the heroesArray as the dropdowns are updated instead. So, we still need an empty heroesArray declared in the global variables.

Now let’s add a JavaScript function called updateDropdowns which will take in 2 parameters: dropdownId and selectedHero. Inside the function, we need to add the selectedHero to the heroesArray (which will also be used by the sortHeroes function). Then, we need to get a list of all of the select HTML elements using document.querySelectorAll. Now we are looping through the list of select elements and checking to see if the dropdown in the current position in the loop has an id that is not equal to the dropdownId parameter value because we want to remove the selectedHero from all other dropdowns on the page if it has already been selected. Then, we loop through all of the options in each dropdown (of course using a new iOpt index variable for the options, we need to be sure to keep these 2 indices straight!). Then we check to see if the option with the index value in the second loop within the dropdown with the index value in the first loop equals the selectedHero parameter. And, if it does then remove it from the dropdown.

Now all we need to do is add the onchange attribute to all of the select elements. When the dropdowns are updated, we want to call the updateDropdowns function and pass the current id and value using this which returns the current object.

Well, that was a lot! Let’s save and test this out. Go ahead and select some items and then make sure the values are not available in the subsequent dropdowns!

Next, let’s add a reset button. The reset button should be disabled until at least 1 option is selected and the sort button should be disabled until 2 options are selected. These are just some ninja coding practices that will make your interfaces more user friendly! First, let’s add a CSS class called enabled and move the background color property from the sort-button class to the enabled class.

Then we need to add the disabled attribute to the sortButton HTML element. This is a Boolean attribute and we do not need to set it to true. It’s presence alone means that the button is disabled. Now let’s copy this button code and create a new reset button with the id resetButton and value Reset. In the onclick attribute, we don’t need to run a function since all we need to do is refresh or reload the page.

Then we need to update the updateDropdowns function. Add an if statement to check if the heroesArray contains more than 1 item. If it does, then get the sortButton element, remove the disabled attribute and add the enabled CSS class. Also check first to see if the button is disabled, otherwise the enabled CSS class would be added to the button every time a dropdown is updated as long as 2 or more items are selected.

We need to do the same thing for the reset button but we do not need to check the heroesArray first. If the code in the updateDropdowns function is running, then at least 1 item is selected and therefore the reset button needs to be enabled.

Save and test out your page! Oops, we forgot to add ids to our buttons so that we can access them using document.getElementById. Now that’s fixed so let’s try again!

Next week, we will continue to add to this page. It would be nice if the user could populate the dropdowns from within the interface and add as many as they want! Until next time, have a great week and Happy Coding!

Completed Code

Have a great week and Happy Coding! #LearnLoveLiveCode