Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,360 --> 00:00:03,520
Now that we have a better understanding
2
00:00:03,520 --> 00:00:07,090
of what DOM and DOM manipulation are,
3
00:00:07,090 --> 00:00:11,423
lets now actually select and manipulate some more elements.
4
00:00:12,850 --> 00:00:14,370
So in the previous lecture,
5
00:00:14,370 --> 00:00:17,810
we already selected this message element here,
6
00:00:17,810 --> 00:00:20,780
by using querSelector, right?
7
00:00:20,780 --> 00:00:25,600
Then we also got the text content from the selected element.
8
00:00:25,600 --> 00:00:28,320
But besides getting the text content,
9
00:00:28,320 --> 00:00:32,190
we can also set the content of the element.
10
00:00:32,190 --> 00:00:33,870
So let do that.
11
00:00:33,870 --> 00:00:35,740
So instead of start guessing,
12
00:00:35,740 --> 00:00:38,690
lets say like correct number.
13
00:00:38,690 --> 00:00:41,303
So that's actually gonna be like the winning phrase.
14
00:00:42,200 --> 00:00:44,053
So again we select the element,
15
00:00:45,690 --> 00:00:46,540
so querySelector,
16
00:00:50,804 --> 00:00:52,750
and the same selector so again,
17
00:00:52,750 --> 00:00:54,953
the element with the class of message,
18
00:00:55,860 --> 00:00:59,630
and then again text content.
19
00:00:59,630 --> 00:01:03,210
So that's exactly the same as here, okay.
20
00:01:03,210 --> 00:01:05,920
Now here we actually then logged the result
21
00:01:05,920 --> 00:01:08,550
to the console so that we could see it.
22
00:01:08,550 --> 00:01:09,383
But here,
23
00:01:09,383 --> 00:01:12,930
we will actually set this content to something else.
24
00:01:12,930 --> 00:01:15,053
And we do that by writing equal,
25
00:01:15,950 --> 00:01:18,703
and then whatever we want the new content to be.
26
00:01:20,020 --> 00:01:23,083
So lets say, correct number,
27
00:01:24,060 --> 00:01:26,873
and I'm also gonna add here the party emoji,
28
00:01:28,360 --> 00:01:30,173
but again you don't need to do that.
29
00:01:31,200 --> 00:01:34,510
It's just to improve the design of the app a little bit
30
00:01:34,510 --> 00:01:35,700
basically.
31
00:01:35,700 --> 00:01:37,130
And so now if I save this,
32
00:01:37,130 --> 00:01:40,640
it should immediately change this text content here.
33
00:01:40,640 --> 00:01:42,293
So watch as I save now,
34
00:01:43,640 --> 00:01:45,430
and nothing happened,
35
00:01:45,430 --> 00:01:48,150
but that's because I'm here on the demo version.
36
00:01:48,150 --> 00:01:49,860
So I need the real one,
37
00:01:49,860 --> 00:01:53,030
and so here you see now correct number.
38
00:01:53,030 --> 00:01:55,220
Great, so that worked.
39
00:01:55,220 --> 00:01:57,700
And down here we still have to start guessing,
40
00:01:57,700 --> 00:02:00,210
because that's what the content of the element
41
00:02:00,210 --> 00:02:01,403
used to be before.
42
00:02:03,360 --> 00:02:05,980
So in this line we started by reading the content
43
00:02:05,980 --> 00:02:07,160
of the element,
44
00:02:07,160 --> 00:02:10,660
and so at the beginning it will still start guessing.
45
00:02:10,660 --> 00:02:14,500
Because that's what's written here in the HTML element,
46
00:02:14,500 --> 00:02:16,710
in the beginning, right?
47
00:02:16,710 --> 00:02:18,920
Then in the next line we changed it,
48
00:02:18,920 --> 00:02:21,690
and now if we would attempt to read it again,
49
00:02:21,690 --> 00:02:25,090
it should then be this new content that we set before.
50
00:02:25,090 --> 00:02:28,610
So lets copy and paste this line here really quick.
51
00:02:28,610 --> 00:02:29,600
Give it a save,
52
00:02:29,600 --> 00:02:32,090
and so now you see that of course
53
00:02:32,090 --> 00:02:35,860
after changing the text content when we then read it,
54
00:02:35,860 --> 00:02:37,910
it will be this new content,
55
00:02:37,910 --> 00:02:39,673
so exactly what we have now here.
56
00:02:41,820 --> 00:02:44,170
Okay, that makes sense?
57
00:02:44,170 --> 00:02:48,880
And so what we did here is really already DOM manipulation.
58
00:02:48,880 --> 00:02:52,590
Because in fact, here we manipulated the text content
59
00:02:52,590 --> 00:02:54,460
of one of the DOM notes.
60
00:02:54,460 --> 00:02:56,373
So essentially this element here.
61
00:02:58,160 --> 00:03:02,320
So lets now do the same with this secret number,
62
00:03:02,320 --> 00:03:03,890
and also the score.
63
00:03:03,890 --> 00:03:06,080
So both of these values,
64
00:03:06,080 --> 00:03:08,680
are basically stored in an element.
65
00:03:08,680 --> 00:03:12,130
So lets take a look at the HTML and so,
66
00:03:12,130 --> 00:03:14,230
this is what I was telling you in the beginning,
67
00:03:14,230 --> 00:03:16,280
that we would need this HTML
68
00:03:16,280 --> 00:03:19,320
to basically get the class names of all the elements
69
00:03:19,320 --> 00:03:21,260
that we are interested in.
70
00:03:21,260 --> 00:03:23,620
So this secret number here,
71
00:03:23,620 --> 00:03:25,220
so this here,
72
00:03:25,220 --> 00:03:29,930
is basically this div element here with the class number.
73
00:03:29,930 --> 00:03:32,030
And then the score as you see down here,
74
00:03:32,030 --> 00:03:33,023
from this 20,
75
00:03:33,940 --> 00:03:35,780
this is where it's 20 is,
76
00:03:35,780 --> 00:03:36,730
and in this case,
77
00:03:36,730 --> 00:03:40,730
it is this span element with the class score.
78
00:03:40,730 --> 00:03:41,840
So now lets go ahead
79
00:03:41,840 --> 00:03:46,253
and select the elements with the class number and score.
80
00:03:49,210 --> 00:03:52,800
Okay, so that's exactly what we did before,
81
00:03:52,800 --> 00:03:54,290
so querySelector,
82
00:03:55,770 --> 00:03:57,423
with the class number.
83
00:03:58,810 --> 00:04:01,370
And just to experiment some more with this,
84
00:04:01,370 --> 00:04:04,973
lets actually set it to something, lets say 13.
85
00:04:05,930 --> 00:04:10,930
And then document dot querySelector dot score.
86
00:04:14,630 --> 00:04:18,090
And by the way, there also other ways of selecting elements
87
00:04:18,090 --> 00:04:20,890
but we will talk about them in one of the next projects.
88
00:04:22,340 --> 00:04:26,680
And lets set this element also to another value.
89
00:04:26,680 --> 00:04:30,040
Now I'm actually, I'm forgetting the text content here,
90
00:04:30,040 --> 00:04:32,500
so we cannot set the entire element,
91
00:04:32,500 --> 00:04:36,173
because the element has way more than just the content.
92
00:04:37,460 --> 00:04:41,623
So I really have to say that the text content should be 13.
93
00:04:43,170 --> 00:04:44,920
So text content,
94
00:04:44,920 --> 00:04:46,810
and now as I re-log this,
95
00:04:46,810 --> 00:04:49,640
this should be 13 and this 20.
96
00:04:49,640 --> 00:04:52,850
Lets actually set this to another number,
97
00:04:52,850 --> 00:04:54,750
otherwise we wouldn't see it changing.
98
00:04:55,870 --> 00:04:59,850
And indeed we get 13 and ten now,
99
00:04:59,850 --> 00:05:02,150
great, that's amazing.
100
00:05:02,150 --> 00:05:05,040
So doing some great DOM manipulation here.
101
00:05:05,040 --> 00:05:07,170
And now lets move on and do the same,
102
00:05:07,170 --> 00:05:09,490
actually with this input field.
103
00:05:09,490 --> 00:05:11,610
So an input field as the name says,
104
00:05:11,610 --> 00:05:13,940
is where we can input some data.
105
00:05:13,940 --> 00:05:17,410
And so actually we can also get the data from here,
106
00:05:17,410 --> 00:05:19,523
and we can of course also set it.
107
00:05:21,380 --> 00:05:24,000
So lets just see how that works,
108
00:05:24,000 --> 00:05:26,180
and it's very similar.
109
00:05:26,180 --> 00:05:29,610
So as always, we start by selecting the element.
110
00:05:29,610 --> 00:05:31,440
And now we need to get the class name,
111
00:05:31,440 --> 00:05:32,943
of this element.
112
00:05:35,100 --> 00:05:38,360
And so, that is
113
00:05:38,360 --> 00:05:39,690
it's right here.
114
00:05:39,690 --> 00:05:42,070
So it has the class of guess,
115
00:05:42,070 --> 00:05:44,533
and as I said, it an input element.
116
00:05:46,450 --> 00:05:48,490
So, again,
117
00:05:48,490 --> 00:05:51,010
dot which is the class selector
118
00:05:51,010 --> 00:05:53,670
and then the name of the class which is guess.
119
00:05:53,670 --> 00:05:55,430
And here we got this error,
120
00:05:55,430 --> 00:05:57,030
because the query selector method
121
00:05:57,030 --> 00:05:59,300
expects at least one argument.
122
00:05:59,300 --> 00:06:01,668
And as we went to the HTML file,
123
00:06:01,668 --> 00:06:04,700
and then saved this JavaScript file,
124
00:06:04,700 --> 00:06:06,570
but we didn't have any string here,
125
00:06:06,570 --> 00:06:08,550
so any parameter yet.
126
00:06:08,550 --> 00:06:10,540
And that's why we got that error.
127
00:06:10,540 --> 00:06:13,010
And now if we want to get the value,
128
00:06:13,010 --> 00:06:15,130
which right now is actually empty.
129
00:06:15,130 --> 00:06:16,850
But if we want to get that,
130
00:06:16,850 --> 00:06:20,023
now, this time, we read the value property.
131
00:06:20,880 --> 00:06:22,500
And so lets,
132
00:06:22,500 --> 00:06:24,890
log that to the console actually.
133
00:06:24,890 --> 00:06:27,003
So again using the CL snippet.
134
00:06:29,320 --> 00:06:30,783
And if we re-logged this now,
135
00:06:31,670 --> 00:06:35,590
yeah, we just get this like empty value here.
136
00:06:35,590 --> 00:06:39,700
Because there is really nothing in there, okay.
137
00:06:39,700 --> 00:06:42,900
But the big difference is that with an input field,
138
00:06:42,900 --> 00:06:44,600
to get the actual value,
139
00:06:44,600 --> 00:06:46,853
we use the value property.
140
00:06:48,240 --> 00:06:53,240
And we can of course also use it to set a value,
141
00:06:53,800 --> 00:06:55,803
so to manipulate this element.
142
00:06:59,060 --> 00:07:04,060
So dot value equals 23, give it a save.
143
00:07:04,900 --> 00:07:06,810
And now we see 23 here.
144
00:07:06,810 --> 00:07:09,840
So as if we had written it ourselves.
145
00:07:09,840 --> 00:07:13,620
So we can delete it here just like any input field,
146
00:07:13,620 --> 00:07:15,600
but instead of us written the number,
147
00:07:15,600 --> 00:07:19,423
it was JavaScript who wrote the 23 here for us.
148
00:07:20,530 --> 00:07:23,070
Simply by executing this code here.
149
00:07:23,070 --> 00:07:26,063
And to make this line of work actually,
150
00:07:30,110 --> 00:07:33,190
and to this line of code here actually work,
151
00:07:33,190 --> 00:07:37,250
we can move it below the one where we are setting the value.
152
00:07:37,250 --> 00:07:41,710
So in this code lets use alt and the down arrow
153
00:07:41,710 --> 00:07:43,480
to move this line down,
154
00:07:43,480 --> 00:07:47,010
and then we should expect to see 23 here in the console
155
00:07:47,010 --> 00:07:48,743
instead of this empty line.
156
00:07:49,770 --> 00:07:50,760
And indeed.
157
00:07:50,760 --> 00:07:54,630
Now we first write 23 here to this input field,
158
00:07:54,630 --> 00:07:57,180
and then afterwards we read it,
159
00:07:57,180 --> 00:08:01,410
and then the value is indeed 23, great.
160
00:08:01,410 --> 00:08:05,860
But now what if we actually wanted to get this number here,
161
00:08:05,860 --> 00:08:07,770
for example to log it to the console.
162
00:08:07,770 --> 00:08:11,070
Whenever we clicked on this button,
163
00:08:11,070 --> 00:08:14,240
well, that's taking it to a whole new level,
164
00:08:14,240 --> 00:08:16,120
and so handling the click of a button
165
00:08:16,120 --> 00:08:19,060
is what we're gonna learn in the next video.
166
00:08:19,060 --> 00:08:20,223
See you there soon.
11803
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.