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.