Jonas: So, in the last lecture
I promised you that we were gonna work
on the budget calculation now.
But first,
we need to actually fix a really annoying thing
in our user interface,
which is to clear the input fields
after we entered an input.
And in this lecture, you're gonna learn a lot of new stuff.
So, you're gonna learn how to clear HTML fields,
how to use querySelectorAll,
that we hadn't used before,
you'll learn how to convert a list to an array,
and also, a better way to loop over an array
than for loops,
and that is the foreach method.
A lot of stuff to cover in this lecture,
so lets do it.
So here is the problem that we need to solve.
Now, last lecture we added this rent here,
but now it is rent,
and the value as well is still here,
so we can continue to click here,
and a new one will be added.
And if we continue to click,
new ones will be added.
So, all of these rents are now here.
So, of course, we need a way to clear
these input fields, right?
So, let's now do that.
And since this is clearly to do with the user interface,
we go to our UI controller.
Which is right here.
So, we're gonna add a new method to this controller.
And of course, it's gonna be a public method,
once again,
and this one is called "clearFields."
Clear...
Fields.
And, of course, we don't need any parameters,
because we already know which are the fields
that we're gonna clear,
which are the two that we saw before.
Alright, so these are two fields,
so lets now use the querySelectorAll,
instead of doing the querySelector that we've been using.
We could do that, then we would use it twice,
but instead we can reduce it to one line of code
by using the querySelectorAll.
So let's do that.
Document dot
query selector,
and this time it's the query selector "All".
So, let's check out which one that we need.
It will be the input description here,
and the input value, right?
So we need to select these two.
DOMstrings...
dot
input description, here.
Okay.
And now remember,
the syntax here is like CSS selecting,
so we separate different selectors simply with a comma.
So we need a string with a comma here,
and then we can join these strings together, right?
What is left now
is...
the input value.
InputValue.
Okay, and...
Let's actually store this in a variable.
Okay.
I'm going to call it "fields".
So, "fields".
Because these are our two fields, right?
Let's declare the variable once again here in the top.
So, var...
fields.
Okay, so this fields variable now holds the result
of the selection.
Now the problem is
that the querySelectorAll method
does return something strange.
It doesn't return a nice array
which we can then use and loop over,
but instead it returns something similar,
but still different,
and that's a list.
So, again, a list is a bit similar to an array,
but it doesn't have
all of these nice methods that we have for arrays.
So the solution to that is to convert the list to an array.
And there's actually a nice little trick
that we can use for that.
And the trick is to use the array method
called "slice".
And what slice does
is to return a copy of the array
that it's called on.
So usually we call this method on an array
and it then returns another array.
But we can kind of trick this method
and pass a list into it,
and then it will still return an array.
So that's the solution for this.
Alright, but there's only one small problem with that,
because we cannot do it like this.
So, fields...
dot
slice
will not work
because again, it's not an array,
and so we cannot call array methods here on the list.
Instead, what we have to do is to call the slice methods
using the call method,
and then passing the fields variable into it
so that it becomes the dis variable,
and then it's gonna work just fine.
And how can we do that?
Where is the slice method actually stored
that we can use it?
Let's think about that.
So where do you think it is stored?
And the solution is,
that it's in the array prototype.
So we can write something like this.
This array is the function constructor
for all arrays, right?
And we know that all the methods
that the arrays inherit from the array function constructors
are in the array's prototype property, right?
And therefore, we know the slice method must also be there.
So we can write "array dot prototype"
and then
"dot slice".
Alright, so here it is.
And since this is a function,
we can then use the call method on it, right?
So, "call".
And then in here, we setted this variable to the fields.
And this will trick the slice method into thinking
that we give it an array,
and so it will return an array.
So if we now store this
into a variable and call it
fields array
then this will be an array.
And actually, again, I'm putting it up here.
So, fields array.
This is now an array.
This is a nice little trick that we can use.
This means that we can now loop over this array
and clear all the fields that were selected,
which were only two in this case,
but if it would be more,
then all of the fields could be cleared at once.
Now we could do it the old-school four loop
that we have been doing all the time
up until this point, right?
But let's make it more exciting.
And so I will show you a new method
that we can use on arrays
which is the forEach method.
It works something like this.
So, fields array.
And now...
forEach.
And this is really simple.
All we have to do is to pass a callback function
into this method,
and then this callback function
is applied to each of the elements in the array.
So let's put an anonymous function in here.
Okay.
Just like this.
Now, this callback function here,
this anonymous function, this case here,
can receive up to three arguments.
And this is really like the callback function
that we saw before on the event listener.
Remember that?
In that case, we did automatically have access
to the event object,
and we could name that object as we wanted, right?
So here, it's actually pretty similar.
Here, we have access to three things.
We have access to the current value,
this means the value of the array
that is currently being processed, let's say,
then we also have the index number,
so the number going from
zero to the length of the array minus one,
and then also,
the entire array.
So we have access to the entire array here, as well.
And again, we can name this as we want.
We could just call this something like "cur", let's say.
And this one just, "index" or just "i".
So we can do it as we want,
and it will always work.
So this is something really nice
that javascript has for some methods.
So remember, what we want to do here
is to simply clear all these fields.
So we want to see them empty.
And it's actually really simple.
All we have to do is to select a current,
okay,
which is this here,
and this means the current element that is being processed.
So it will first be the input description,
and then the input value, right?
So if we set the value
of these
back to empty,
then the fields will simply be cleared.
And it really is as simple as this.
So again, this forEach method here
moves over all of the elements of the fields array,
and then sets the value of all of them
back to the empty string.
And we have access to the current element
thanks to this callback function here,
which has access to these three arguments.
So, the current element,
the current index,
and the original array,
which in this case would be fields array.
Okay?
So let's now use this method.
And for that, we're gonna go back to our controller.
This is something we actually didn't put here
in our comments,
so let's say,
"Four...
"clear the fields."
And what we're gonna do is "UIController"
and "clearFields".
As simple as that.
So let's now test this.
So, reload.
And now,
salary, let's say,
of 1200.
And, yeah.
The fields are empty now.
Let's try it again.
So, holidays...
600.
And yeah, it's empty again.
Now one thing that we should also do
is to set the focus back to the first field here, right?
So that we can easily
continue to put more items in here.
And that's also pretty easy to do.
So let's just go back to our clear fields method,
and then we just need a line of code here
which sets the focus
on the first element of the array, right?
So, fields array,
zero, which is the first element,
which will be the input description
which is exactly what we want.
So it will select the first element,
and then we simply need to use the focus method.
So, "focus",
and that's it.
Alright, let's seed it again.
And again.
Salary...
1200, let's say.
And, yeah, the focus is back to the description.
So this makes it easier to input the values.
Alright, but now it's really time to start working
here on the budget
and on the total income and expenses.
So, come with me right to the next lecture!