Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Select a Page Element By Its ID

5:59 with Guil Hernandez and Joel Kraft

In this video, we'll select and change the headline color, but this time, we'll do it in response to clicking a button.

Teacher's Notes
Video Transcript
Downloads

MDN page for getElementById

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 style attribute 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