Original subtitles

1 1

Now that we have a better understanding 2

2

of what DOM and DOM manipulation are, 3

3

lets now actually select and manipulate some more elements. 4

4

So in the previous lecture, 5

5

we already selected this message element here, 6

6

by using querSelector, right? 7

7

Then we also got the text content from the selected element. 8

8

But besides getting the text content, 9

9

we can also set the content of the element. 10

10

So let do that. 11

11

So instead of start guessing, 12

12

lets say like correct number. 13

13

So that's actually gonna be like the winning phrase. 14

14

So again we select the element, 15

15

so querySelector, 16

16

and the same selector so again, 17

17

the element with the class of message, 18

18

and then again text content. 19

19

So that's exactly the same as here, okay. 20

20

Now here we actually then logged the result 21

21

to the console so that we could see it. 22

22

But here, 23

23

we will actually set this content to something else. 24

24

And we do that by writing equal, 25

25

and then whatever we want the new content to be. 26

26

So lets say, correct number, 27

27

and I'm also gonna add here the party emoji, 28

28

but again you don't need to do that. 29

29

It's just to improve the design of the app a little bit 30

30

basically. 31

31

And so now if I save this, 32

32

it should immediately change this text content here. 33

33

So watch as I save now, 34

34

and nothing happened, 35

35

but that's because I'm here on the demo version. 36

36

So I need the real one, 37

37

and so here you see now correct number. 38

38

Great, so that worked. 39

39

And down here we still have to start guessing, 40

40

because that's what the content of the element 41

41

used to be before. 42

42

So in this line we started by reading the content 43

43

of the element, 44

44

and so at the beginning it will still start guessing. 45

45

Because that's what's written here in the HTML element, 46

46

in the beginning, right? 47

47

Then in the next line we changed it, 48

48

and now if we would attempt to read it again, 49

49

it should then be this new content that we set before. 50

50

So lets copy and paste this line here really quick. 51

51

Give it a save, 52

52

and so now you see that of course 53

53

after changing the text content when we then read it, 54

54

it will be this new content, 55

55

so exactly what we have now here. 56

56

Okay, that makes sense? 57

57

And so what we did here is really already DOM manipulation. 58

58

Because in fact, here we manipulated the text content 59

59

of one of the DOM notes. 60

60

So essentially this element here. 61

61

So lets now do the same with this secret number, 62

62

and also the score. 63

63

So both of these values, 64

64

are basically stored in an element. 65

65

So lets take a look at the HTML and so, 66

66

this is what I was telling you in the beginning, 67

67

that we would need this HTML 68

68

to basically get the class names of all the elements 69

69

that we are interested in. 70

70

So this secret number here, 71

71

so this here, 72

72

is basically this div element here with the class number. 73

73

And then the score as you see down here, 74

74

from this 20, 75

75

this is where it's 20 is, 76

76

and in this case, 77

77

it is this span element with the class score. 78

78

So now lets go ahead 79

79

and select the elements with the class number and score. 80

80

Okay, so that's exactly what we did before, 81

81

so querySelector, 82

82

with the class number. 83

83

And just to experiment some more with this, 84

84

lets actually set it to something, lets say 13. 85

85

And then document dot querySelector dot score. 86

86

And by the way, there also other ways of selecting elements 87

87

but we will talk about them in one of the next projects. 88

88

And lets set this element also to another value. 89

89

Now I'm actually, I'm forgetting the text content here, 90

90

so we cannot set the entire element, 91

91

because the element has way more than just the content. 92

92

So I really have to say that the text content should be 13. 93

93

So text content, 94

94

and now as I re-log this, 95

95

this should be 13 and this 20. 96

96

Lets actually set this to another number, 97

97

otherwise we wouldn't see it changing. 98

98

And indeed we get 13 and ten now, 99

99

great, that's amazing. 100

100

So doing some great DOM manipulation here. 101

101

And now lets move on and do the same, 102

102

actually with this input field. 103

103

So an input field as the name says, 104

104

is where we can input some data. 105

105

And so actually we can also get the data from here, 106

106

and we can of course also set it. 107

107

So lets just see how that works, 108

108

and it's very similar. 109

109

So as always, we start by selecting the element. 110

110

And now we need to get the class name, 111

111

of this element. 112

112

And so, that is 113

113

it's right here. 114

114

So it has the class of guess, 115

115

and as I said, it an input element. 116

116

So, again, 117

117

dot which is the class selector 118

118

and then the name of the class which is guess. 119

119

And here we got this error, 120

120

because the query selector method 121

121

expects at least one argument. 122

122

And as we went to the HTML file, 123

123

and then saved this JavaScript file, 124

124

but we didn't have any string here, 125

125

so any parameter yet. 126

126

And that's why we got that error. 127

127

And now if we want to get the value, 128

128

which right now is actually empty. 129

129

But if we want to get that, 130

130

now, this time, we read the value property. 131

131

And so lets, 132

132

log that to the console actually. 133

133

So again using the CL snippet. 134

134

And if we re-logged this now, 135

135

yeah, we just get this like empty value here. 136

136

Because there is really nothing in there, okay. 137

137

But the big difference is that with an input field, 138

138

to get the actual value, 139

139

we use the value property. 140

140

And we can of course also use it to set a value, 141

141

so to manipulate this element. 142

142

So dot value equals 23, give it a save. 143

143

And now we see 23 here. 144

144

So as if we had written it ourselves. 145

145

So we can delete it here just like any input field, 146

146

but instead of us written the number, 147

147

it was JavaScript who wrote the 23 here for us. 148

148

Simply by executing this code here. 149

149

And to make this line of work actually, 150

150

and to this line of code here actually work, 151

151

we can move it below the one where we are setting the value. 152

152

So in this code lets use alt and the down arrow 153

153

to move this line down, 154

154

and then we should expect to see 23 here in the console 155

155

instead of this empty line. 156

156

And indeed. 157

157

Now we first write 23 here to this input field, 158

158

and then afterwards we read it, 159

159

and then the value is indeed 23, great. 160

160

But now what if we actually wanted to get this number here, 161

161

for example to log it to the console. 162

162

Whenever we clicked on this button, 163

163

well, that's taking it to a whole new level, 164

164

and so handling the click of a button 165

165

is what we're gonna learn in the next video. 166

166

See you there soon.