1 00:00:00,250 --> 00:00:04,003 In the previous, video we wrote some JavaScript to change the color of 2 00:00:04,003 --> 00:00:08,533 an element when we clicked it, but how did the browser know which element to target? 3 00:00:08,533 --> 00:00:14,370 Well we selected the element in the first line using document.getElementById. 4 00:00:14,370 --> 00:00:19,237 Selection is a way to identify an element for a browser, so the browser can find 5 00:00:19,237 --> 00:00:23,755 it and make it available for us to do something with it using JavaScript. 6 00:00:23,755 --> 00:00:26,534 So in this video, we'll select and change the headline color again but 7 00:00:26,534 --> 00:00:29,320 this time we'll do it in response to clicking a button. 8 00:00:29,320 --> 00:00:31,599 So we need to start by selecting that button. 9 00:00:31,599 --> 00:00:34,180 Now document, as I said earlier, 10 00:00:34,180 --> 00:00:38,458 is a global variable representing the current web page. 11 00:00:38,458 --> 00:00:43,740 And the getElementById method belongs to the document object. 12 00:00:43,740 --> 00:00:46,190 It looks through the entire page for 13 00:00:46,190 --> 00:00:51,343 an element with the specified ID then it returns that element if it exists. 14 00:00:51,343 --> 00:00:54,298 So now let's add a button to our page and give it an ID, 15 00:00:54,298 --> 00:00:58,506 then we'll see how to use the button to change the color of the heading. 16 00:00:58,506 --> 00:01:03,920 Over in index.html I'll add a button underneath the heading and 17 00:01:03,920 --> 00:01:07,095 paragraph elements and I'll give the button the ID myButton. 18 00:01:15,147 --> 00:01:18,615 And the text for this button will be Make heading red. 19 00:01:19,895 --> 00:01:23,471 So now we can find this element in our JavaScript file with 20 00:01:23,471 --> 00:01:28,839 document.getElementById and I'll call the constant I'm using to store the button 21 00:01:28,839 --> 00:01:34,927 element myButton to match its ID Then 22 00:01:34,927 --> 00:01:43,722 we'll say document.getElementById('myButton'). 23 00:01:45,490 --> 00:01:49,046 So now instead of the heading element listening for 24 00:01:49,046 --> 00:01:51,786 clicks, we want the button to listen. 25 00:01:51,786 --> 00:02:00,016 So let's call addEventListener on myButton instead of myHeading. 26 00:02:00,016 --> 00:02:04,170 Now when the button is clicked, we still want the heading to change to red. 27 00:02:04,170 --> 00:02:07,048 So we can leave this function as is. 28 00:02:07,048 --> 00:02:09,857 All right, so I'll give my file a save and 29 00:02:09,857 --> 00:02:13,850 let's switch back to the browser and refresh. 30 00:02:13,850 --> 00:02:16,700 So now clicking on the heading does nothing, but 31 00:02:16,700 --> 00:02:19,560 clicking the button changes the heading to red. 32 00:02:19,560 --> 00:02:23,816 So great, our script is selecting both elements successfully and 33 00:02:23,816 --> 00:02:27,090 changing the headline when the button is clicked. 34 00:02:28,550 --> 00:02:32,438 So right now the script can only change the heading to red. 35 00:02:32,438 --> 00:02:35,648 So let's enable it to change to any color we want. 36 00:02:35,648 --> 00:02:40,802 So we'll want to add one more element to our page over in index.html, let's 37 00:02:40,802 --> 00:02:46,148 add an input element above the button and I'll give it the ID, myTextInput. 38 00:02:46,148 --> 00:02:51,233 And while we're at it, 39 00:02:51,233 --> 00:02:56,573 let's change the text of 40 00:02:56,573 --> 00:03:03,193 the button to make more sense. 41 00:03:03,193 --> 00:03:05,770 We'll make it say Change headline color. 42 00:03:10,919 --> 00:03:12,231 Then over in app.js, 43 00:03:12,231 --> 00:03:17,140 we'll select the text input the same way we selected the heading and button. 44 00:03:17,140 --> 00:03:21,745 So we'll say const myTextInput = 45 00:03:21,745 --> 00:03:28,905 document.getElementById('myTextInput'). 46 00:03:34,260 --> 00:03:40,108 So now the constant, myTextInput, holds a reference to the text input element. 47 00:03:40,108 --> 00:03:41,927 And when a user clicks the button, 48 00:03:41,927 --> 00:03:45,130 we want to read whatever the value that element holds. 49 00:03:45,130 --> 00:03:49,440 And we can do this by accessing the value property of the input element. 50 00:03:49,440 --> 00:03:54,293 So let's save both of our documents and switch back over to the browser and 51 00:03:54,293 --> 00:03:57,594 refresh and here we can open the developer tools. 52 00:03:57,594 --> 00:04:01,283 Now remember earlier how I said you could write JavaScript in the console and 53 00:04:01,283 --> 00:04:03,390 it would run as if it was in the page? 54 00:04:03,390 --> 00:04:07,077 So in the console, let's take myTextInput and 55 00:04:07,077 --> 00:04:11,881 see that we can access the constant we declared in the script. 56 00:04:11,881 --> 00:04:16,970 You can even hover over this input element and see the browser highlight it. 57 00:04:16,970 --> 00:04:24,031 So now if we type myTextInput.value, we see that it's an empty string. 58 00:04:24,031 --> 00:04:29,934 So let's type something into the blank text field, let's say green. 59 00:04:29,934 --> 00:04:33,982 Now going back to the console and hitting the up arrow, 60 00:04:33,982 --> 00:04:36,801 then enter, we get the string green. 61 00:04:36,801 --> 00:04:39,915 You can try putting in other text if you like to, but for 62 00:04:39,915 --> 00:04:43,660 now I'm going to switch back to the JavaScript code. 63 00:04:43,660 --> 00:04:51,160 And instead of the string red I'm going to put the code we just tried in the console, 64 00:04:51,160 --> 00:04:55,569 so I'll replace red with myTextInput.value. 65 00:04:55,569 --> 00:04:59,489 And now the heading CSS color property will be set to the value typed 66 00:04:59,489 --> 00:05:02,830 into the text box whenever the button is clicked. 67 00:05:02,830 --> 00:05:06,335 Again, if this function isn't making sense just yet, don't worry. 68 00:05:06,335 --> 00:05:07,876 We'll cover this later in the course, 69 00:05:07,876 --> 00:05:11,190 we're just getting practice selecting elements for now. 70 00:05:11,190 --> 00:05:13,155 All right, so let's have a look in the browser. 71 00:05:13,155 --> 00:05:18,476 If I refresh the page and enter a color in the text field, let's say purple, 72 00:05:18,476 --> 00:05:23,068 and click the button, you can see the heading changes to purple. 73 00:05:23,068 --> 00:05:26,458 And it will also work with a color like light blue, 74 00:05:26,458 --> 00:05:30,160 you can even enter hex colors if you like to. 75 00:05:30,160 --> 00:05:36,950 So let's try grey with #999, and cool, it changes the headline to grey. 76 00:05:38,910 --> 00:05:41,919 We've just written our first app together, so well done and 77 00:05:41,919 --> 00:05:44,348 feel free to play with it before the next videos. 78 00:05:44,348 --> 00:05:48,522 You could try to add a button that always resets the title to black, for example, or 79 00:05:48,522 --> 00:05:52,641 create another text field that sets a different style attribute of the headline, 80 00:05:52,641 --> 00:05:54,690 such as the background color or border. 81 00:05:54,690 --> 00:05:58,270 In the next video, I'll show you some alternative element selection methods.