In the previous, video we wrote some JavaScript to change the color of

an element when we clicked it, but how did the browser know which element to target?

Well we selected the element in the first line using document.getElementById.

Selection is a way to identify an element for a browser, so the browser can find

it and make it available for us to do something with it using JavaScript.

So in this video, we'll select and change the headline color again but

this time we'll do it in response to clicking a button.

So we need to start by selecting that button.

Now document, as I said earlier,

is a global variable representing the current web page.

And the getElementById method belongs to the document object.

It looks through the entire page for

an element with the specified ID then it returns that element if it exists.

So now let's add a button to our page and give it an ID,

then we'll see how to use the button to change the color of the heading.

Over in index.html I'll add a button underneath the heading and

paragraph elements and I'll give the button the ID myButton.

And the text for this button will be Make heading red.

So now we can find this element in our JavaScript file with

document.getElementById and I'll call the constant I'm using to store the button

element myButton to match its ID Then

we'll say document.getElementById('myButton').

So now instead of the heading element listening for

clicks, we want the button to listen.

So let's call addEventListener on myButton instead of myHeading.

Now when the button is clicked, we still want the heading to change to red.

So we can leave this function as is.

All right, so I'll give my file a save and

let's switch back to the browser and refresh.

So now clicking on the heading does nothing, but

clicking the button changes the heading to red.

So great, our script is selecting both elements successfully and

changing the headline when the button is clicked.

So right now the script can only change the heading to red.

So let's enable it to change to any color we want.

So we'll want to add one more element to our page over in index.html, let's

add an input element above the button and I'll give it the ID, myTextInput.

And while we're at it,

let's change the text of

the button to make more sense.

We'll make it say Change headline color.

Then over in app.js,

we'll select the text input the same way we selected the heading and button.

So we'll say const myTextInput =

document.getElementById('myTextInput').

So now the constant, myTextInput, holds a reference to the text input element.

And when a user clicks the button,

we want to read whatever the value that element holds.

And we can do this by accessing the value property of the input element.

So let's save both of our documents and switch back over to the browser and

refresh and here we can open the developer tools.

Now remember earlier how I said you could write JavaScript in the console and

it would run as if it was in the page?

So in the console, let's take myTextInput and

see that we can access the constant we declared in the script.

You can even hover over this input element and see the browser highlight it.

So now if we type myTextInput.value, we see that it's an empty string.

So let's type something into the blank text field, let's say green.

Now going back to the console and hitting the up arrow,

then enter, we get the string green.

You can try putting in other text if you like to, but for

now I'm going to switch back to the JavaScript code.

And instead of the string red I'm going to put the code we just tried in the console,

so I'll replace red with myTextInput.value.

And now the heading CSS color property will be set to the value typed

into the text box whenever the button is clicked.

Again, if this function isn't making sense just yet, don't worry.

We'll cover this later in the course,

we're just getting practice selecting elements for now.

All right, so let's have a look in the browser.

If I refresh the page and enter a color in the text field, let's say purple,

and click the button, you can see the heading changes to purple.

And it will also work with a color like light blue,

you can even enter hex colors if you like to.

So let's try grey with #999, and cool, it changes the headline to grey.

We've just written our first app together, so well done and

feel free to play with it before the next videos.

You could try to add a button that always resets the title to black, for example, or

create another text field that sets a different style attribute of the headline,

such as the background color or border.

In the next video, I'll show you some alternative element selection methods.