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 style attribute of the headline

0:00

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

0:04

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

0:08

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

0:14

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

0:19

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

0:23

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

0:26

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

0:29

So we need to start by
selecting that button.

0:31

Now document, as I said earlier,

0:34

is a global variable representing
the current web page.

0:38

And the getElementById method
belongs to the document object.

0:43

It looks through the entire page for

0:46

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

0:51

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

0:54

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

0:58

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

1:03

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

1:15

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

1:19

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

1:23

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

1:28

element myButton to match its ID Then

1:34

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

1:45

So now instead of the heading
element listening for

1:49

clicks, we want the button to listen.

1:51

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

2:00

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

2:04

So we can leave this function as is.

2:07

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

2:09

let's switch back to the browser and
refresh.

2:13

So now clicking on
the heading does nothing, but

2:16

clicking the button changes
the heading to red.

2:19

So great, our script is selecting
both elements successfully and

2:23

changing the headline when
the button is clicked.

2:28

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

2:32

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

2:35

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

2:40

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

2:46

And while we're at it,

2:51

let's change the text of

2:56

the button to make more sense.

3:03

We'll make it say Change headline color.

3:10

Then over in app.js,

3:12

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

3:17

So we'll say const myTextInput =

3:21

document.getElementById('myTextInput').

3:34

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

3:40

And when a user clicks the button,

3:41

we want to read whatever
the value that element holds.

3:45

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

3:49

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

3:54

refresh and
here we can open the developer tools.

3:57

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

4:01

it would run as if it was in the page?

4:03

So in the console,
let's take myTextInput and

4:07

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

4:11

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

4:16

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

4:24

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

4:29

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

4:33

then enter, we get the string green.

4:36

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

4:39

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

4:43

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

4:51

so I'll replace red
with myTextInput.value.

4:55

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

4:59

into the text box whenever
the button is clicked.

5:02

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

5:06

We'll cover this later in the course,

5:07

we're just getting practice
selecting elements for now.

5:11

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

5:13

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

5:18

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

5:23

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

5:26

you can even enter hex
colors if you like to.

5:30

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

5:38

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

5:41

feel free to play with it
before the next videos.

5:44

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

5:48

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

5:52

such as the background color or border.

5:54

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