1
00:00:00,750 --> 00:00:01,620
Welcome back everyone.

2
00:00:01,620 --> 00:00:02,220
All right.

3
00:00:02,220 --> 00:00:06,360
So I'm just going to go ahead I'm going to leave these two functions and I mean delete these two buttons

4
00:00:06,360 --> 00:00:07,850
here and I'm going to.

5
00:00:07,860 --> 00:00:12,390
What we're going to do in this literal is we're going to change this text to something else here because

6
00:00:12,390 --> 00:00:14,530
I'm going to show you that functions can do something else.

7
00:00:14,580 --> 00:00:15,280
So we're going to.

8
00:00:15,400 --> 00:00:20,310
Well it's always good to make your buttons and this may sound incredibly obvious but it's always good

9
00:00:20,310 --> 00:00:23,040
to make your buttons say what they're going to do.

10
00:00:23,040 --> 00:00:26,960
So one is very ambiguous you don't know what's going on.

11
00:00:26,970 --> 00:00:34,140
But if you say change the text the user knows exactly what he's supposed to do.

12
00:00:34,140 --> 00:00:34,850
All right.

13
00:00:35,300 --> 00:00:42,050
So now if we click on this again it just still says one because that's what's in the javascript file.

14
00:00:42,050 --> 00:00:46,090
Now if we go ahead and we're going to go and delete that.

15
00:00:46,250 --> 00:00:53,200
Now just for argument's sake it's better to call your functions and name them appropriately as well.

16
00:00:53,360 --> 00:01:03,610
So function one two three is not exactly the best way you want it to say you know change the text.

17
00:01:03,610 --> 00:01:04,530
All right.

18
00:01:04,580 --> 00:01:11,240
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

19
00:01:11,240 --> 00:01:11,500
that.

20
00:01:11,510 --> 00:01:12,030
OK.

21
00:01:12,320 --> 00:01:18,720
So we got change the text and so now that we do this it should work.

22
00:01:18,740 --> 00:01:24,500
And what you can do is one thing you can use the alert for and sometimes like to do it just to see if

23
00:01:24,500 --> 00:01:26,090
it actually gets there and does work.

24
00:01:26,090 --> 00:01:32,270
OK so the changing of the names that actually is it can be a problem especially when debugging.

25
00:01:32,390 --> 00:01:38,150
You can change the name of the function and you make a typo or something like that or something something

26
00:01:38,150 --> 00:01:38,720
like that happens.

27
00:01:38,720 --> 00:01:39,230
All right.

28
00:01:39,320 --> 00:01:44,840
So what we need to do is we need to we can't just say change the paragraph to this.

29
00:01:44,840 --> 00:01:46,770
Now that's exactly what we wanted to do.

30
00:01:46,910 --> 00:01:54,740
Remember that comment function what we wanted to do is change the paragraph and that's what piece stands

31
00:01:54,740 --> 00:01:54,910
for.

32
00:01:54,910 --> 00:01:57,960
By the way is paragraph text so that's what we wanted to do.

33
00:01:58,040 --> 00:02:04,220
Now wouldn't one programming just be super awesome if we if we could actually do that but we can't do

34
00:02:04,220 --> 00:02:08,260
that we have to actually learn the syntax of javascript here.

35
00:02:08,360 --> 00:02:15,860
So what we need to do is you need to type in ID equals right and then this ID equals in the beginning

36
00:02:16,040 --> 00:02:17,510
type into apostrophe's.

37
00:02:17,690 --> 00:02:29,840
And we're just going to say something like para graph text just like that.

38
00:02:29,860 --> 00:02:33,010
Now you're probably wondering why I'm not adding in spaces.

39
00:02:33,010 --> 00:02:38,890
And the reason is that as soon as you add a space in the world of computers that's like adding in a

40
00:02:38,890 --> 00:02:40,120
completely different object.

41
00:02:40,140 --> 00:02:48,190
So paragraph is kind of one computer object and I'm oversimplifying here but if a paragraph has one

42
00:02:48,190 --> 00:02:56,320
computer object paragraph space text has two computer objects but paragraph no space text is one computer

43
00:02:56,320 --> 00:02:56,680
object.

44
00:02:56,680 --> 00:03:00,280
So we're just going to change it to ID paragraph text.

45
00:03:00,310 --> 00:03:07,620
Ok so the next bit here is going to be a little bit of typing but don't worry about this.

46
00:03:08,110 --> 00:03:12,710
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

47
00:03:12,820 --> 00:03:25,540
need to type in document K Dot gets element and then by I d k and you notice how I'm capitalizing everything

48
00:03:25,540 --> 00:03:26,210
there.

49
00:03:26,650 --> 00:03:29,560
It's very good to be case sensitive like this.

50
00:03:29,560 --> 00:03:34,640
And then we need to do is what I like to do is I like type in two brackets here.

51
00:03:34,780 --> 00:03:42,490
And I also like to type into apostrophes like that and you want to do you want to do para graph text

52
00:03:42,520 --> 00:03:43,370
just like that.

53
00:03:43,480 --> 00:03:46,090
Or you can copy this over and put it in there.

54
00:03:46,240 --> 00:03:53,320
So what this is what this small encodes doing is saying we need to find the ID of paragraph text paragraph.

55
00:03:53,350 --> 00:03:58,360
The idea could be anything it could be in the button it could be anywhere but we're going to do is we're

56
00:03:58,360 --> 00:04:02,610
going to change the Ellman tidy and we're going to change it.

57
00:04:02,630 --> 00:04:05,890
Change the paragraph text but what do we need to change it to.

58
00:04:06,010 --> 00:04:12,510
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

59
00:04:12,590 --> 00:04:20,490
capitalized and we're an equal this K another two Apostrophe's and we can change this to whatever we

60
00:04:20,490 --> 00:04:20,760
want.

61
00:04:20,760 --> 00:04:24,840
We say we changed the text.

62
00:04:24,860 --> 00:04:25,540
OK.

63
00:04:25,730 --> 00:04:29,450
And then put a semi-colon at the end that because we're finished that and you notice that the warning

64
00:04:29,450 --> 00:04:30,340
sign went away.

65
00:04:30,470 --> 00:04:31,300
And there we go.

66
00:04:31,310 --> 00:04:37,640
So we got so first things first is that we set up the paragraph tag into paragraph text and then in

67
00:04:37,640 --> 00:04:39,460
our javascript we found it.

68
00:04:39,470 --> 00:04:45,380
And that's what this document dichotoma meant idea does is it finds that tag and then when we need to

69
00:04:45,380 --> 00:04:49,310
do is change it here and I'm just going to I'm just going to put this here just like this.

70
00:04:49,580 --> 00:04:51,860
So that's what it should look like here.

71
00:04:52,100 --> 00:05:00,730
And and if you want to do that now I purposely have a bigger monitor but what I reason why do I do this

72
00:05:00,740 --> 00:05:04,400
in such a small is so that it works better and people can see everything that I'm doing a little bit

73
00:05:04,400 --> 00:05:04,880
more.

74
00:05:05,050 --> 00:05:05,540
OK.

75
00:05:05,660 --> 00:05:09,830
So if you go change the text and voila we have changed the text.

76
00:05:10,050 --> 00:05:10,360
OK.

77
00:05:10,370 --> 00:05:16,490
And that's all it is right now obviously if we click it again it works it doesn't work because we've

78
00:05:16,490 --> 00:05:17,360
already changed it.

79
00:05:17,360 --> 00:05:23,000
Now if you wanted to do two things back and forth data we can do as well.

80
00:05:23,000 --> 00:05:28,490
Now you'll also notice that you can do this you could have a limited amount of paragraph tag so if I

81
00:05:28,490 --> 00:05:35,390
just copy this over here and I typed in paragraph text to write and then I changed the text you'll notice

82
00:05:35,390 --> 00:05:44,880
that since I changed this element ID over here the function only changed this first element ID.

83
00:05:44,900 --> 00:05:46,830
So I said function test 2.

84
00:05:46,850 --> 00:05:50,760
And then what happens is that it only changed a paragraph text.

85
00:05:50,780 --> 00:05:51,250
OK.

86
00:05:51,530 --> 00:05:56,880
So if we did a paragraph text 2 like this you can see that the bottom would change.

87
00:05:56,900 --> 00:05:57,400
OK.

88
00:05:57,650 --> 00:06:04,940
And that's how you change text and that's how you can do anything within or change the text within javascript.

89
00:06:04,940 --> 00:06:06,600
I'll see you guys next to Turrell.