Welcome back, this lesson, we're going to create a drop down with all of the elements on the page
that are contained within the main div with an ID of mean.
So all of these elements, it doesn't matter how many we have in here, fully dynamic, we're going
to have the option to select any one of those.
And then we can manipulate the inner text, the background, the text color.
We can toggle add in classes and a whole bunch of really cool fun stuff.
So let's add that into the project where we've got another select and just as we did with the classes,
we can populate this select object.
So let's give it a name.
And the name can be anything we want.
Let's call it Al Maker for a short for element maker.
And then we're going to select this object in our JavaScript and connect that so that we can utilize
it.
So it's the same way as we did the select classes.
We can literally just copy this.
And this can now be called our maker and you don't have to call it the same thing.
Usually I just do that so that I can reference it a lot easier.
So now we've got the object that will make her object.
And usually, of course, again, I like to check to make sure that we've got that L maker.
So we've got that select element and we're ready to make updates to it using JavaScript.
So as we've got over here, we see that we select the node list so we can loop through each one of the
items within the node list.
And just as we did with the array, we want to create a bunch of different options here.
So the user has a listing of all the elements that are available.
So let's add that in.
And I'm just going to update this so that we can see in Urtext.
So it's a little bit clearer output for the user and then this one can be select element.
Save that, refresh that.
So that's a little bit clearer for the user.
And I'm also going to take this main and I'm going to move it down.
So in case we're updating and we're adding and things are fluctuating around that it's not moving our
main input form.
So now we're all the updating elements.
The elements that are updating are below and we've got the option to select the elements and we've got
that added into the cell.
The L make her object.
So that means that we're ready to create that and usually let's create a function in order to do that.
So we can call it dropdown builder and we don't need to pass in any parameters because these are global
objects that we can utilize.
So we've got all of those values within the node list and I usually like to relisted so we can copy
and paste the code that's available here and we can just call to dropdown builder within the DOM content
loaded function so we can call DropDown Builder any time we want to build out unordered list.
So we're selecting all of those elements, adding it into the node list and also we can add it in multiple
times.
So it's not going to be any harm.
And in case there's updates to the elements which we are going to be doing later on in one of the upcoming
lessons, dynamically adding elements as well to the page, and then that's going to have to add into
the list.
So we're constantly have to rebuild this dropdown list.
So as we iterate through, we need to get the index value because this is how we can tie it into the
node list.
We can retrieve back its index value, how it's showing on the page.
So just as we're getting item, we can also get the index of each of the items and you can also do just
a regular as well.
So you can see that now I'm actually getting the index values, I'm getting the item, the index value.
So this is going to make it a lot easier for us to reference, because now whenever I want to reference
a particular element, I can use that global node list where I can type node list.
And because this is within an array type format, I can select any one of the elements just by specifying
their index value, how they're appearing within the node list.
So that's going to make it easier for us to make those updates and select the appropriate element when
we do our update of that element content.
So the next thing that we want to do is build those options in the dropdown.
And this is actually going to be the exact same format, except we're going to use index as the value
that's represented to the user.
So the value here is going to be index and this is that hidden value in the dropdown.
So if you go to the dropdown, you see that you've got within the option, you've got a value and then
you've got the inner text.
So the value is the one that's hidden.
And if we want just the index values, we can keep that in value, whereas within the item we can output
its tag name and that will return back.
The tag value that's associated with it and then dropping it into the element maker object.
So we're ready to dynamically generate a list of all the elements on the page.
So you can see now they're all represented here.
And the values of this input, if you go to inspect, are going to correspond with the index value.
So that means that we can take those values and as we pass them in, we can update whatever the selected
element is.
So let's call it temp.
And this is going to be whatever the value of sailmaker is.
So whatever the current value is in, this is going to return back that index value.
So that's getting those values from the HTML.
And instead of select element, we can update that element to temp element and do a refresh.
So within the node, Lyster, so this is returning back an index value and we need to reference that
value from the node list.
So let's try that out.
So now when we select the div or the paragraph and we do an update, you can see it's updating it.
You can also add in padding, bigger padding, you can add in the border, you can toggle the bigger.
So you've got a lot of the options that are available to you.
I can select any one of these elements and I can make updates to the what the content that's available
here.
And also, just as we saw earlier, we can update some of the text color for one or two as well.
So it's close that and updates the text color updates.
We can update the background color.
So you need to close these.
And we can select any one of the divs and apply these properties to them.
So go ahead and try this out.
And now we're fully dynamic and the next thing that we want to do is have the ability to add even more
elements on the page and as well to apply event listeners to the existing elements.
So we maybe we want to remove them.
So if we click, that could remove those elements.
So I'll show you how to do all of that coming up.
So dynamically add elements as well as remove elements.
And then we constantly have to rebuild the list as we loop through this.
And there's one other thing that I did want to add in before we conclude.
So every time we're going in to rebuild this list.
So potentially we might be calling on dropdown builder every time we have some updates to the list.
So this is just to clear out any of the existing HTML that's available with an L..
A. So that we're starting out fresh all the time.
So go ahead and add this into your project.