Let's talk about how we can get form values now.
So in the last couple of lessons,
we did this cool thing where we did dot HTML.
We also did dot text.
Now, that's cool and that works with elements like
a section that has content inside of it,
content in side of it. And that's fine.
But what if we're working with an element that doesn't have content inside of it.
And what if we're working with an input element?
Now in input element doesn't have a closing tag.
There's no text inside of it.
How do we deal with this?
So first of all, let's save this.
And this is what our page looks like.
It's just an input element.
It's a very boring input element.
But what we can do here is we can now go ahead and get the text in there.
So let's give this a default value.
Hello world, just the defacto sort of texts that every programmer tends to use.
And it says hello world. What if we wanted to be able to pull this value out?
Well, let's start by first selecting it.
We're going to select it by an input is the only thing on our page
and we can just select it by its only input value.
And then we can do dot val.
Now there's two things we can do here,
and I'm actually going to talk about DOT test.html as well in just a moment.
But we can do this.
Constant value is equal to console.log set value.
And all we're doing here is again, we're,
we're selecting that input dot.
And then we used Lotvall,
not dot value, dot va al.
And we aren't putting anything inside the parentheses here, it's just empty.
And so when I refresh the page and go over to my console, it says hello world.
And that's pulling that value out of here so we can
change that value to Hello World 1-2-3.
And when I refresh the page,
it says Hello 1-2-3 or helloworld 1-2-3 inside of the console.
Now what if we wanted to change this?
Well, that's really easy too. We could change this.
And we could say, this is changed and always simply do is add a value.
Now, we don't want to necessarily work with this anymore and let's get rid of that.
So we're gonna select that input, say that value.
This one up here needs to be, this is changed.
So let's go ahead and check this out.
And it says this is changed,
but in our source code,
it says hello world 1-2-3.
Still.
It just happens to be that JavaScript and jQuery together or overriding that value.
And so you can actually see when I refresh fast enough it flickers a little bit.
That cool little trick with dot val.
When it's empty, we can do the same thing with dot HTML and dot text.
So let's go ahead and give that a quick little example as well.
Section that just throw some lorem in here,
some lorem ipsum I type LO REM hit tab
on VS Code and it automatically fills it with Lorem Ipsum for me.
So I don't have to think about some sort of dummy text
because sometimes it's hard to come up with examples like that.
So what we can do here is now we can select this section and we can grab that text.
And we can put that in a variable as well.
So const text is equal to console.log text.
And when I refresh this page,
we have all this text in here,
and we also have all this text in here.
Now, notice that it actually also has the whitespace.
And that whitespace, if I refresh
a source code comes from red here all the way up to that new line in there.
And there's also extra white space at the end.
To the end of the section.
We can do the same thing with dot HTML,
and let's make this bolded.
So we're just gonna bold the word REM.
And we can see that it's bolded in here.
And it's bolded in here.
Now here's the difference.
When we do dot text.
Notice that this one is bolded up here,
but REM over here in our console,
it has the HTML stripped out of it.
So just be careful there.
So that's a fun little three in one lesson.
What I want you to do though,
is just ignore this for now.
Just tuck that in your back pocket.
And I want you to create an input element and use dot
val to set the value of the input element.
When you're done that, let's go ahead and talk about how we can
dynamically add HTML to a certain part of a page,
like inside of an element to the front or the back of it.