So in previous lecture, we have learned how to create a question list when we ask questions, then
they appear below in question.
This rapper, each question on the right side has a button for added, which actually doesn't work at
this point.
Let's see what we are going to do in this lecture.
Let's take a look one more time on our finished application.
At first, I'm going to add a question.
So when I click on edit button, the contents of question with its proper options appear in working
mode.
We are able to ask the question text and the options as well, change the correct answer.
And after that, update the question or even deleted from a question list.
So we are going to program this stuff.
Editing questions include some complicated things and tricky ways.
So you should be more concentrated in order to avoid confusion and misunderstanding.
But you do not have to worry much because I'm going to explain everything step by step in that.
All right.
Let's go back to Brackett's from the previous lecture, you know that we have used IDs, which are properties
of question, objects from local storage, and those IDs make each edit button unique.
So we will use this ID in order to distinguish added buttons from each other.
And also it will help us to get specified question objects from local storage.
So the first thing that we are going to do is to set up listener so that let's use current element,
which in this case is inserted questions Rupo and attached to it at Event Listener.
We have to do it in a controller module.
The needed element inserted question rubber is already selected so.
Right selected items.
Doctors inserted questions rapper.
And then attach an event listener.
Inside parentheses, right click event.
And I'm going to use your anonymous function, and in this function, we will involve method for editing
questions, which will hold some arguments.
Here we need to use event object, which will actually help us to find correct elements from questionable.
All right, so the event listener is attached, and now it's time to create method for editing questions,
which will be the part of the UI controller module, the right writer added question list.
Then assigned to it anonymous function.
This function will hold several parameters as the first one, I'm going to pass your events, which
represents an event object, and then in order to get access on local storage, let's write another
parameter and call it storage question list.
All right, the next thing that we're going to do is to invoke this method, we have to do it in control
module inside and on this function.
So.
Right.
You control the.
That added question list.
So the first parameter was event for event object, therefore, as a first argument, we have to pass
it.
And for the second argument, we need to get access on local storage, so let's right to your controller
that gets question local storage.
OK, now it's time to test and see how it works, let's go back to the question, what is the method?
And right inside Castlewood Log.
Event.
And then storage question least.
Also, we have about another consulate like.
Let's get rid of it.
Then go to the browser.
Reload the page.
You know, that at event listener is attached to the entire inserted question repr, therefore when
I click on any place that the event fires and function is invoked.
So you see in counsel that we have a mouth event object and then local storage object.
All right, fine.
But in this case, we want to run the code only in case of clicking on edit button.
For that we have to use if statement.
In which we will use some tricky ways in order to execute codes for every button.
I'm going to use I'd attribute an index of the method so we know that I'd attribute is different for
every question element because they got different numbers from local storage.
But at the same time, all the elements have same part of attributes, which is question dash.
So right here, question and dash.
Then we need to use index of method in order to define if I'd attribute of cliqued elements includes
question and dash writes DOT index of.
And then inside parentheses, we have to indicate ID of clicked element object so that I'm going to
use no way so right events.
And use your target property.
And then Ida.
So if a user has clicked on element, which contains I'd attribute with the following characters, I'm
in question and dash, then this condition will be true.
Makes sense.
OK, let's test again right inside that log.
Events, dot.
Targets dot ID.
Then go to the browser.
Revolt.
Click on any place except add button and see that nothing happens because condition in each statement
is false.
But if we click on Add to the bottom of that, we will get question that zero.
OK, let's add another question.
Then click on new questions, edit button and we have a question, that one.
All right, great.
It works fine in order to update or delete question, first of all, we need to find out on which item
from local storage should we perform those actions so that we are going to use from I'd attribute I
mean, for example, from question Dasch zero, the second part number.
And the great way to do that is to use one of the built-In string methods in JavaScript, which is called
split.
Before we use it, let's demonstrate how it actually works.
For that, let's go to browser and use console.
Create a variable and assigned to it as a string question, that zero.
Which we got in one of our cases.
Then use a split method, Rite Aid to split.
Inside parentheses, we need to indicate the character on which should be performed, split, let's
use Desh.
And you see that we have an array which consists of two items, question and zero.
Both of them are represented as rings and the dash itself is remote.
So this is a way houseplant split method works.
We're going to use this method in our case in order to get no part of the attribute.
First of all, we need to declare a new variable.
Let's call it gets ID.
Then inside, if statement to use this variable and assign to it no part of the attribute which will
be defined using split method, right event dot target.
Dot ID.
Van der split.
And inside parentheses.
Plus, Desh.
As we saw in previous example in council, we got a using a split method and the number was its second
item.
So in order to get this second item, you know that it has index number one.
So that's right.
Inside square brackets one.
Let's see what variable gets it looks like.
Writing consent to get ID.
Go to the browser and reload.
Then click on add buttons.
And you see that we got here zero and one, we got numbers, but actually they have data type as a string.
I want to transform them into numbers for that.
There is another built in method in JavaScript called Pass Int, which converts string into number and
returns it as an integer.
So let's use your powers eight.
And surround all of this stuff with parentheses.
OK, let's see again in browser.
Reloader page.
Click on added buttons.
And we have here again, zero and one, but with data type as number, because their color is changed
in council.
All right, fine.
Let's delete this dialogue.
So the next step is to find out which question object in local storage contains this ID so that we have
to get access on local storage and then use follow in order to figure out which question object should
be updated or deleted.
First of all, I'm going to declare a new variable.
Let's call it gas storage question list.
In order to minimize the amount of code, I'm going to use this variable and then assigned to it storage
question list.
That's gets question collection.
So we have access on an array in local storage, which includes question objects, and now I'm going
to use falbe rights for verbalised equals to zero.
Then, right, the condition is less than the length of that storage question list.
And then I plus plus.
Now we need to get an item which will have the same value of Idy property as gets it for that, again,
we need to use if statements, right, if.
Storage question least.
Then the variable I thought I'd.
Triple A equals to get Edem.
Then we need to save this item into variable, let's at first declare a new variable and call it found
item.
Then use this variable.
And assigned to it found an item which was defined by its statement, so right, get storage question
list I.
All right, the next thing that we are going to do is to define the actual place of found item in Iran,
we have to do it because in case of updates of question, we need to get back the question item on its
original place.
For example, if we want to update the second question after update, it should be placed as second
question again in question list.
Makes sense.
I understand that it may be confusing and hard for you, especially if your new in JavaScript good,
but at the same time I'm trying to do my best and explain things in detail.
So I hope that you understand everything.
OK, let's move on.
Anticolonial variable and call it place in Ouray.
And then inside, if statement you place in array and assign to it the variable I.
All right, let's see again in Castle how those variables work right outside of Falu Castle, that lock.
Found item.
And that place in a right.
Then go to the browser reload page.
Click on added buttons.
And he said that we have questioned item from Iran and its actual place in that area.
All right, perfect.
It's time to display the question whether it's proper options.
When we click on edit button, let's assign to new question text as a value question, text or phone
item.
Let's remote control the and write dumb items.
That's new question text.
Dutch value.
Equals to found item.
Good question.
Text.
Let's see how it works, go to browser, reload the page.
And click on Added.
So you see that the proper question text appeared in text area.
All right, in the same way, we need to display the proper options for question.
But at first, we need to clear them and then assign the proper values to them over again.
Let's take a look on Endecott Extremophile.
The inputs for options are inside of which we have already selected previously.
So let's use this element.
Right.
Don't items.
Dot admit options container.
And then use in your property.
Equals two to three.
So now, in order to assign the values to options over again, I'm going to use follow.
Let's use your variable X because I is already used like variable X equal to zero as a condition.
We need to compare X to length of options of found item.
The right X is less than found.
Item dot options.
Dr..
And then X plus plus.
OK, the next step is to create content for each option, for that, I'm going to declare a new variable
and colleagues option HTML.
I call it option because I'm going to grab again the content of this variable from HMO documents.
So let's go back to the HMO file.
We need to copy development, which actually is admin option repr with its including input elements.
Then go back to cryptologist file and assign it to option HDMI variable.
Again, I'm going to remove these white spaces from here.
Because of that, we don't meet on each iteration to change the content of option XHTML, but to collect
them for that we have to use plus sign before equals sign.
OK, you see here that inputs have the class names, admin option zero.
We need to change these numbers dynamically using the variable X so that Spillett zeroth.
Then.
Place, empty, single quotes.
And then right, plus X plus.
And the last thing here to change is the value of option and input, we have to pass the content of
option of item, place empty quotes and right plus.
Found item.
Good options.
X and then plus again.
All right, the content of option e-mail is almost ready.
Let's test it right, Castle, that log.
Option e-mail.
Go to the browser.
Reload the page.
Click on edit and you see that we have entire original content.
But at the beginning of this value, there is undefined.
Actually, it's not a surprise.
We know that when we declare the variable JavaScript engine automatically assigns to it undefined.
So in order to fix that, we have just to assign to option html amp to string.
So right before for loop.
Option HDMI.
Equals two to three.
Go to the browser again.
Reloader page.
Click on Added.
And you see that it's fixed.
OK, great.
And now it's time to display proper values of option one, we click on added button.
Let's.
Copy it and paste after for a loop.
And instead of empty quotes assigned to the variable option, HDMI.
Let's delete the log, then go back to your browser again, reload the page, click on ads and see that
the entire question with question, text and proper options are displayed, OK?
Really cool, right?
So it works, but here we have a little problem when we focus on Luss inputs, new inputs are not added
dynamically.
In order to fix that problem, we have to pass another parameter in function.
Actually, this parameter will be a function.
Thanks to first class functions in JavaScript, which you already know, we have ability to pass functions
as arguments.
OK, let's call this parameter at input's dynamically function, right, it's in kind of shot way.
Then go to the controller module and as an argument, you're our known method.
UI controller dot at input's dynamic.
And then call it inside if statements.
Right below at input's, dynamically function.
Go to the browser.
Reload.
Click on edit.
Then focus on lost inputs and see that they are added dynamically.
OK.
We are almost done, the only thing is to display updates and delete buttons from success by default,
they are hidden, so we need to change their styles.
At first, let's select these elements.
So you see here two buttons for updates and police, they have proper I.D. attributes, question, update
and questionability PETN.
Let's couple the first one.
Then inside dome items, object creates another property and colleagues question, update an.
Then right document that gets aliments by ID.
And then paste your ID question update at.
That creates property for delete button and colleagues question delete button.
Then copy it.
And.
Change update into undelete.
All right.
So we have selected both buttons, now it's time to change their styles and make them visible.
Four for that's right, Dom items start question update with an.
Dot style.
And use your success, property visibility.
Which equals to visible.
Let's copy it and change updating to delete.
And also, when we click on edit button, we want to highlight insert button, so that selected as well,
right, DOM items.
That question is with the.
That style.
Dot visibility.
Equals two hidden.
All right, so we are done, let's go to browser, reload the page.
Click on Added.
And you see that buttons for updates and leads are visible and insert button is hidden.
OK, perfect.
It's enough for this video.
I know that it was a little bit long one, but I'm sure that you have learned a lot.
So let's move on.