Original subtitles

Now that we have a better understanding

of what DOM and DOM manipulation are,

lets now actually select and manipulate some more elements.

So in the previous lecture,

we already selected this message element here,

by using querSelector, right?

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

But besides getting the text content,

we can also set the content of the element.

So let do that.

So instead of start guessing,

lets say like correct number.

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

So again we select the element,

so querySelector,

and the same selector so again,

the element with the class of message,

and then again text content.

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

Now here we actually then logged the result

to the console so that we could see it.

But here,

we will actually set this content to something else.

And we do that by writing equal,

and then whatever we want the new content to be.

So lets say, correct number,

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

but again you don't need to do that.

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

basically.

And so now if I save this,

it should immediately change this text content here.

So watch as I save now,

and nothing happened,

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

So I need the real one,

and so here you see now correct number.

Great, so that worked.

And down here we still have to start guessing,

because that's what the content of the element

used to be before.

So in this line we started by reading the content

of the element,

and so at the beginning it will still start guessing.

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

in the beginning, right?

Then in the next line we changed it,

and now if we would attempt to read it again,

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

So lets copy and paste this line here really quick.

Give it a save,

and so now you see that of course

after changing the text content when we then read it,

it will be this new content,

so exactly what we have now here.

Okay, that makes sense?

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

Because in fact, here we manipulated the text content

of one of the DOM notes.

So essentially this element here.

So lets now do the same with this secret number,

and also the score.

So both of these values,

are basically stored in an element.

So lets take a look at the HTML and so,

this is what I was telling you in the beginning,

that we would need this HTML

to basically get the class names of all the elements

that we are interested in.

So this secret number here,

so this here,

is basically this div element here with the class number.

And then the score as you see down here,

from this 20,

this is where it's 20 is,

and in this case,

it is this span element with the class score.

So now lets go ahead

and select the elements with the class number and score.

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

so querySelector,

with the class number.

And just to experiment some more with this,

lets actually set it to something, lets say 13.

And then document dot querySelector dot score.

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

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

And lets set this element also to another value.

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

so we cannot set the entire element,

because the element has way more than just the content.

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

So text content,

and now as I re-log this,

this should be 13 and this 20.

Lets actually set this to another number,

otherwise we wouldn't see it changing.

And indeed we get 13 and ten now,

great, that's amazing.

So doing some great DOM manipulation here.

And now lets move on and do the same,

actually with this input field.

So an input field as the name says,

is where we can input some data.

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

and we can of course also set it.

So lets just see how that works,

and it's very similar.

So as always, we start by selecting the element.

And now we need to get the class name,

of this element.

And so, that is

it's right here.

So it has the class of guess,

and as I said, it an input element.

So, again,

dot which is the class selector

and then the name of the class which is guess.

And here we got this error,

because the query selector method

expects at least one argument.

And as we went to the HTML file,

and then saved this JavaScript file,

but we didn't have any string here,

so any parameter yet.

And that's why we got that error.

And now if we want to get the value,

which right now is actually empty.

But if we want to get that,

now, this time, we read the value property.

And so lets,

log that to the console actually.

So again using the CL snippet.

And if we re-logged this now,

yeah, we just get this like empty value here.

Because there is really nothing in there, okay.

But the big difference is that with an input field,

to get the actual value,

we use the value property.

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

so to manipulate this element.

So dot value equals 23, give it a save.

And now we see 23 here.

So as if we had written it ourselves.

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

but instead of us written the number,

it was JavaScript who wrote the 23 here for us.

Simply by executing this code here.

And to make this line of work actually,

and to this line of code here actually work,

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

So in this code lets use alt and the down arrow

to move this line down,

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

instead of this empty line.

And indeed.

Now we first write 23 here to this input field,

and then afterwards we read it,

and then the value is indeed 23, great.

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

for example to log it to the console.

Whenever we clicked on this button,

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

and so handling the click of a button

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

See you there soon.