Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll select and change the headline color, but this time, we'll do it in response to clicking a button.
Common Errors:
Mismatching Values
- Spelling - If you get an undefined error when trying to grab an element you may have incorrectly spelled the argument being passed.
- Case Sensitivity - Make sure your capitalizations are proper camelCase and the correct letters are capitalized.
Accessing the value of an input element
Use the value property to get the text that has been entered into an input element. For example, if you have a text input stored in a variable myInput, you can retrieve any text the user has typed into that input like this:
myInput.value
Experiment with the app
- Add a button that always resets the title to black
- Create another field that sets a different
styleattribute of the headline
In the previous, video we wrote some
JavaScript to change the color of
0:00
an element when we clicked it, but how did
the browser know which element to target?
0:04
Well we selected the element in the first
line using document.getElementById.
0:08
Selection is a way to identify an element
for a browser, so the browser can find
0:14
it and make it available for us to do
something with it using JavaScript.
0:19
So in this video, we'll select and
change the headline color again but
0:23
this time we'll do it in
response to clicking a button.
0:26
So we need to start by
selecting that button.
0:29
Now document, as I said earlier,
0:31
is a global variable representing
the current web page.
0:34
And the getElementById method
belongs to the document object.
0:38
It looks through the entire page for
0:43
an element with the specified ID then
it returns that element if it exists.
0:46
So now let's add a button to our page and
give it an ID,
0:51
then we'll see how to use the button
to change the color of the heading.
0:54
Over in index.html I'll add
a button underneath the heading and
0:58
paragraph elements and
I'll give the button the ID myButton.
1:03
And the text for
this button will be Make heading red.
1:15
So now we can find this element
in our JavaScript file with
1:19
document.getElementById and I'll call
the constant I'm using to store the button
1:23
element myButton to match its ID Then
1:28
we'll say
document.getElementById('myButton').
1:34
So now instead of the heading
element listening for
1:45
clicks, we want the button to listen.
1:49
So let's call addEventListener on
myButton instead of myHeading.
1:51
Now when the button is clicked, we still
want the heading to change to red.
2:00
So we can leave this function as is.
2:04
All right, so I'll give my file a save and
2:07
let's switch back to the browser and
refresh.
2:09
So now clicking on
the heading does nothing, but
2:13
clicking the button changes
the heading to red.
2:16
So great, our script is selecting
both elements successfully and
2:19
changing the headline when
the button is clicked.
2:23
So right now the script can
only change the heading to red.
2:28
So let's enable it to change
to any color we want.
2:32
So we'll want to add one more element
to our page over in index.html, let's
2:35
add an input element above the button and
I'll give it the ID, myTextInput.
2:40
And while we're at it,
2:46
let's change the text of
2:51
the button to make more sense.
2:56
We'll make it say Change headline color.
3:03
Then over in app.js,
3:10
we'll select the text input the same
way we selected the heading and button.
3:12
So we'll say const myTextInput =
3:17
document.getElementById('myTextInput').
3:21
So now the constant, myTextInput, holds
a reference to the text input element.
3:34
And when a user clicks the button,
3:40
we want to read whatever
the value that element holds.
3:41
And we can do this by accessing
the value property of the input element.
3:45
So let's save both of our documents and
switch back over to the browser and
3:49
refresh and
here we can open the developer tools.
3:54
Now remember earlier how I said you could
write JavaScript in the console and
3:57
it would run as if it was in the page?
4:01
So in the console,
let's take myTextInput and
4:03
see that we can access the constant
we declared in the script.
4:07
You can even hover over this input
element and see the browser highlight it.
4:11
So now if we type myTextInput.value,
we see that it's an empty string.
4:16
So let's type something into the blank
text field, let's say green.
4:24
Now going back to the console and
hitting the up arrow,
4:29
then enter, we get the string green.
4:33
You can try putting in other
text if you like to, but for
4:36
now I'm going to switch back
to the JavaScript code.
4:39
And instead of the string red I'm going to
put the code we just tried in the console,
4:43
so I'll replace red
with myTextInput.value.
4:51
And now the heading CSS color property
will be set to the value typed
4:55
into the text box whenever
the button is clicked.
4:59
Again, if this function isn't
making sense just yet, don't worry.
5:02
We'll cover this later in the course,
5:06
we're just getting practice
selecting elements for now.
5:07
All right, so
let's have a look in the browser.
5:11
If I refresh the page and enter a color
in the text field, let's say purple,
5:13
and click the button,
you can see the heading changes to purple.
5:18
And it will also work with
a color like light blue,
5:23
you can even enter hex
colors if you like to.
5:26
So let's try grey with #999, and cool,
it changes the headline to grey.
5:30
We've just written our first app together,
so well done and
5:38
feel free to play with it
before the next videos.
5:41
You could try to add a button that always
resets the title to black, for example, or
5:44
create another text field that sets a
different style attribute of the headline,
5:48
such as the background color or border.
5:52
In the next video, I'll show you some
alternative element selection methods.
5:54
You need to sign up for Treehouse in order to download course files.
Sign up