Hi and welcome back in this lesson, we're going to add a few more inputs into our input area so that
we can update some elements and element content.
So let's add in another input.
And this input is going to be background color of the element.
We're going to also adjust the style properties of the element.
So background, I'm just going to do some simple text here in order to indicate what this field is going
to be for.
So this type and I'm going to use HTML5, so using the color selector and we can call this background
and I'll add in another line break and create another input.
And this input is also a color.
And this is going to be the text color.
So it's going to update the color value of the field of the input and I'll move the submit button to
the bottom.
So we're still going to be using that mean div on our screen and we're going to be updating it dynamically
with JavaScript.
And the way that we want to do that is we want to still add in that button.
So whenever that submit gets pressed and I'm going to update some of the values here contained within
the HTML.
So just call this update and this is no longer going to be a first name.
This is going to be output.
And then as we update it, we've got to make sure that we're updating the corresponding values in JavaScript
as well so that we're still able to make those element selections.
So now we've got a little bit more content available to us and just double check that we're still getting
that same input so that one is still connected.
And we're going to update the contents whenever we're updating and making the click.
So we've got all of this information.
We can get rid of it because we're actually we already know which element we're making the update to.
So if we were to take that element.
So this represents the selected element and this is the only div that we have on the page.
So if we output and I'll just clear this up, so if we have our selected element so just us, we can
select the element, we can also update its style, we can update its background.
I'll make this bigger.
We can update its background properties as well as its text properties.
And Chrome is giving me the dropdown option here so we can set the background color.
And if we want to set it to blue, all we have to do is equal it to blue and you can see it updates
immediately within the DOM.
You can also update the text color.
So the same way updating the style attribute.
And in this case we're going to update the color value.
So it's going to represent the font color.
So if we wanted to update it to white, we could update it to white.
And there's a ton of different options that you can see when you're selecting style.
And even in Chrome, there's a lot of options and dropdown.
So you can update your background colors, you can repeat it, you can update your border.
And just as you would with any of the success, you've got all of these options.
You can do column widths.
And there's just really pretty much anything to do with styling you can do here within JavaScript.
You can also update the padding if you want.
So setting all of the padding to five picks and that gave us more padding so that when we go back to
the element, you can see that within the element itself, we've updated the style properties.
So given a background color of blue, we've given a color of white padding of five picks and now that's
present.
So just as we were updating the inner text, we can also update these color values.
So let's go ahead and make those updates.
So selecting those input values, we need to also select those inputs.
So this one will be select background.
And we're selecting the element with the name of background, the input with the name of background.
And we're also selecting the element with so we can call this one text and the name of text so that
we know what we're referencing.
And within the console, let's output the value that's contained within the background and we'll also
output the value that's contained within the text, the text and outputting the value of that object.
So just as we did with the input where we've got the text value contained within the input, we're going
to retrieve back these color values.
So these are HTML five, and this gives us an automatic color picker that we can use in order to update
colors.
So let's do that and we'll try that out so we can set a different color here.
You can also set a default color if you want.
And then now when I press update, you're going to see that we're outputting the background color and
we're also updating that text color.
So if we want to update the.
And we want to update it to blue, we can update it that way, and now when we do update, you're going
to see that the new color values are present within those inputs.
So now it's a matter of just as we saw here, where we can get that element.
So we select that element and apply it style properties.
So using the style method and the value that we want to update is the background color.
So selecting the object properly, we need to just simply apply the value of the background.
So it's that input value and we're applying the background color to that.
And we're also going to do the same thing for text.
So updating in this case, it's not background color, it's just going to be color.
And we're updating it to whatever the values contained within here.
And I'm also going to set some defaults here.
So so the default value of we use hexadecimal there.
So that's black.
And actually let's change this to white because the default value is white and this is black.
So to see that we've got white so it can make an update and update the text color and as soon as we
update it, you see that those that value of that input updates as well.
And this is all done via JavaScript.
And then you can set these colors to whatever you want.
And every time you press update, you're going to see that it is actually updating that element style,
attribute values.
So go ahead and add this into your project, try it out.
And coming up, we're going to extend on this functionality.
We're going to extend on the functionality.