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.