Select a Page Element By Its ID

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