WEBVTT 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.