Welcome back everyone.
All right.
So I'm just going to go ahead I'm going to leave these two functions and I mean delete these two buttons
here and I'm going to.
What we're going to do in this literal is we're going to change this text to something else here because
I'm going to show you that functions can do something else.
So we're going to.
Well it's always good to make your buttons and this may sound incredibly obvious but it's always good
to make your buttons say what they're going to do.
So one is very ambiguous you don't know what's going on.
But if you say change the text the user knows exactly what he's supposed to do.
All right.
So now if we click on this again it just still says one because that's what's in the javascript file.
Now if we go ahead and we're going to go and delete that.
Now just for argument's sake it's better to call your functions and name them appropriately as well.
So function one two three is not exactly the best way you want it to say you know change the text.
All right.
And if we go ahead and one trick I like to do is to copy this and I'd like to paste it in there like
that.
OK.
So we got change the text and so now that we do this it should work.
And what you can do is one thing you can use the alert for and sometimes like to do it just to see if
it actually gets there and does work.
OK so the changing of the names that actually is it can be a problem especially when debugging.
You can change the name of the function and you make a typo or something like that or something something
like that happens.
All right.
So what we need to do is we need to we can't just say change the paragraph to this.
Now that's exactly what we wanted to do.
Remember that comment function what we wanted to do is change the paragraph and that's what piece stands
for.
By the way is paragraph text so that's what we wanted to do.
Now wouldn't one programming just be super awesome if we if we could actually do that but we can't do
that we have to actually learn the syntax of javascript here.
So what we need to do is you need to type in ID equals right and then this ID equals in the beginning
type into apostrophe's.
And we're just going to say something like para graph text just like that.
Now you're probably wondering why I'm not adding in spaces.
And the reason is that as soon as you add a space in the world of computers that's like adding in a
completely different object.
So paragraph is kind of one computer object and I'm oversimplifying here but if a paragraph has one
computer object paragraph space text has two computer objects but paragraph no space text is one computer
object.
So we're just going to change it to ID paragraph text.
Ok so the next bit here is going to be a little bit of typing but don't worry about this.
What we need to do is this is just how we do it in javascript so what do you need to do is you don't
need to type in document K Dot gets element and then by I d k and you notice how I'm capitalizing everything
there.
It's very good to be case sensitive like this.
And then we need to do is what I like to do is I like type in two brackets here.
And I also like to type into apostrophes like that and you want to do you want to do para graph text
just like that.
Or you can copy this over and put it in there.
So what this is what this small encodes doing is saying we need to find the ID of paragraph text paragraph.
The idea could be anything it could be in the button it could be anywhere but we're going to do is we're
going to change the Ellman tidy and we're going to change it.
Change the paragraph text but what do we need to change it to.
We need to type in another dot and we're going to type in inner h T.M. and make sure it's smell was
capitalized and we're an equal this K another two Apostrophe's and we can change this to whatever we
want.
We say we changed the text.
OK.
And then put a semi-colon at the end that because we're finished that and you notice that the warning
sign went away.
And there we go.
So we got so first things first is that we set up the paragraph tag into paragraph text and then in
our javascript we found it.
And that's what this document dichotoma meant idea does is it finds that tag and then when we need to
do is change it here and I'm just going to I'm just going to put this here just like this.
So that's what it should look like here.
And and if you want to do that now I purposely have a bigger monitor but what I reason why do I do this
in such a small is so that it works better and people can see everything that I'm doing a little bit
more.
OK.
So if you go change the text and voila we have changed the text.
OK.
And that's all it is right now obviously if we click it again it works it doesn't work because we've
already changed it.
Now if you wanted to do two things back and forth data we can do as well.
Now you'll also notice that you can do this you could have a limited amount of paragraph tag so if I
just copy this over here and I typed in paragraph text to write and then I changed the text you'll notice
that since I changed this element ID over here the function only changed this first element ID.
So I said function test 2.
And then what happens is that it only changed a paragraph text.
OK.
So if we did a paragraph text 2 like this you can see that the bottom would change.
OK.
And that's how you change text and that's how you can do anything within or change the text within javascript.
I'll see you guys next to Turrell.