1 00:00:00,000 --> 00:00:03,750 Let's talk about how we can get form values now. 2 00:00:03,750 --> 00:00:05,790 So in the last couple of lessons, 3 00:00:05,790 --> 00:00:08,600 we did this cool thing where we did dot HTML. 4 00:00:08,595 --> 00:00:11,595 We also did dot text. 5 00:00:11,595 --> 00:00:15,605 Now, that's cool and that works with elements like 6 00:00:15,600 --> 00:00:18,960 a section that has content inside of it, 7 00:00:18,960 --> 00:00:23,180 content in side of it. And that's fine. 8 00:00:23,175 --> 00:00:26,165 But what if we're working with an element that doesn't have content inside of it. 9 00:00:26,160 --> 00:00:29,190 And what if we're working with an input element? 10 00:00:29,185 --> 00:00:32,545 Now in input element doesn't have a closing tag. 11 00:00:32,540 --> 00:00:34,540 There's no text inside of it. 12 00:00:34,535 --> 00:00:36,125 How do we deal with this? 13 00:00:36,125 --> 00:00:38,185 So first of all, let's save this. 14 00:00:38,180 --> 00:00:39,650 And this is what our page looks like. 15 00:00:39,650 --> 00:00:41,450 It's just an input element. 16 00:00:41,450 --> 00:00:43,670 It's a very boring input element. 17 00:00:43,670 --> 00:00:46,760 But what we can do here is we can now go ahead and get the text in there. 18 00:00:46,760 --> 00:00:48,650 So let's give this a default value. 19 00:00:48,650 --> 00:00:54,970 Hello world, just the defacto sort of texts that every programmer tends to use. 20 00:00:54,965 --> 00:00:59,845 And it says hello world. What if we wanted to be able to pull this value out? 21 00:00:59,840 --> 00:01:02,860 Well, let's start by first selecting it. 22 00:01:02,855 --> 00:01:05,575 We're going to select it by an input is the only thing on our page 23 00:01:05,570 --> 00:01:08,110 and we can just select it by its only input value. 24 00:01:08,105 --> 00:01:11,045 And then we can do dot val. 25 00:01:11,260 --> 00:01:13,520 Now there's two things we can do here, 26 00:01:13,520 --> 00:01:17,600 and I'm actually going to talk about DOT test.html as well in just a moment. 27 00:01:17,600 --> 00:01:19,490 But we can do this. 28 00:01:19,490 --> 00:01:26,030 Constant value is equal to console.log set value. 29 00:01:26,030 --> 00:01:27,970 And all we're doing here is again, we're, 30 00:01:27,965 --> 00:01:30,655 we're selecting that input dot. 31 00:01:30,650 --> 00:01:31,750 And then we used Lotvall, 32 00:01:31,745 --> 00:01:35,035 not dot value, dot va al. 33 00:01:35,030 --> 00:01:39,800 And we aren't putting anything inside the parentheses here, it's just empty. 34 00:01:39,800 --> 00:01:44,810 And so when I refresh the page and go over to my console, it says hello world. 35 00:01:44,810 --> 00:01:47,360 And that's pulling that value out of here so we can 36 00:01:47,360 --> 00:01:49,340 change that value to Hello World 1-2-3. 37 00:01:49,340 --> 00:01:50,450 And when I refresh the page, 38 00:01:50,450 --> 00:01:55,420 it says Hello 1-2-3 or helloworld 1-2-3 inside of the console. 39 00:01:55,415 --> 00:01:57,655 Now what if we wanted to change this? 40 00:01:57,650 --> 00:01:59,920 Well, that's really easy too. We could change this. 41 00:01:59,915 --> 00:02:04,675 And we could say, this is changed and always simply do is add a value. 42 00:02:04,670 --> 00:02:09,290 Now, we don't want to necessarily work with this anymore and let's get rid of that. 43 00:02:09,290 --> 00:02:13,180 So we're gonna select that input, say that value. 44 00:02:13,175 --> 00:02:16,555 This one up here needs to be, this is changed. 45 00:02:16,550 --> 00:02:18,140 So let's go ahead and check this out. 46 00:02:18,140 --> 00:02:19,310 And it says this is changed, 47 00:02:19,310 --> 00:02:20,810 but in our source code, 48 00:02:20,810 --> 00:02:22,550 it says hello world 1-2-3. 49 00:02:22,550 --> 00:02:23,270 Still. 50 00:02:23,270 --> 00:02:29,590 It just happens to be that JavaScript and jQuery together or overriding that value. 51 00:02:29,585 --> 00:02:35,165 And so you can actually see when I refresh fast enough it flickers a little bit. 52 00:02:35,165 --> 00:02:37,475 That cool little trick with dot val. 53 00:02:37,475 --> 00:02:42,065 When it's empty, we can do the same thing with dot HTML and dot text. 54 00:02:42,065 --> 00:02:44,725 So let's go ahead and give that a quick little example as well. 55 00:02:44,720 --> 00:02:48,020 Section that just throw some lorem in here, 56 00:02:48,020 --> 00:02:50,810 some lorem ipsum I type LO REM hit tab 57 00:02:50,810 --> 00:02:54,520 on VS Code and it automatically fills it with Lorem Ipsum for me. 58 00:02:54,515 --> 00:02:56,795 So I don't have to think about some sort of dummy text 59 00:02:56,795 --> 00:03:01,505 because sometimes it's hard to come up with examples like that. 60 00:03:01,505 --> 00:03:08,905 So what we can do here is now we can select this section and we can grab that text. 61 00:03:08,900 --> 00:03:10,910 And we can put that in a variable as well. 62 00:03:10,910 --> 00:03:16,330 So const text is equal to console.log text. 63 00:03:16,325 --> 00:03:18,375 And when I refresh this page, 64 00:03:18,375 --> 00:03:20,055 we have all this text in here, 65 00:03:20,050 --> 00:03:23,260 and we also have all this text in here. 66 00:03:23,260 --> 00:03:27,180 Now, notice that it actually also has the whitespace. 67 00:03:27,175 --> 00:03:30,495 And that whitespace, if I refresh 68 00:03:30,490 --> 00:03:34,830 a source code comes from red here all the way up to that new line in there. 69 00:03:34,825 --> 00:03:37,015 And there's also extra white space at the end. 70 00:03:37,015 --> 00:03:38,655 To the end of the section. 71 00:03:38,650 --> 00:03:40,780 We can do the same thing with dot HTML, 72 00:03:40,780 --> 00:03:45,890 and let's make this bolded. 73 00:03:46,920 --> 00:03:50,530 So we're just gonna bold the word REM. 74 00:03:50,530 --> 00:03:53,450 And we can see that it's bolded in here. 75 00:03:53,790 --> 00:03:57,900 And it's bolded in here. 76 00:03:57,895 --> 00:03:59,565 Now here's the difference. 77 00:03:59,560 --> 00:04:01,910 When we do dot text. 78 00:04:02,350 --> 00:04:05,230 Notice that this one is bolded up here, 79 00:04:05,225 --> 00:04:07,555 but REM over here in our console, 80 00:04:07,550 --> 00:04:09,490 it has the HTML stripped out of it. 81 00:04:09,485 --> 00:04:11,375 So just be careful there. 82 00:04:11,375 --> 00:04:15,025 So that's a fun little three in one lesson. 83 00:04:15,020 --> 00:04:17,090 What I want you to do though, 84 00:04:17,090 --> 00:04:18,880 is just ignore this for now. 85 00:04:18,875 --> 00:04:20,725 Just tuck that in your back pocket. 86 00:04:20,720 --> 00:04:23,450 And I want you to create an input element and use dot 87 00:04:23,450 --> 00:04:27,130 val to set the value of the input element. 88 00:04:27,125 --> 00:04:30,145 When you're done that, let's go ahead and talk about how we can 89 00:04:30,140 --> 00:04:34,040 dynamically add HTML to a certain part of a page, 90 00:04:34,040 --> 00:04:37,980 like inside of an element to the front or the back of it.