So we have already prepared the questions for change the question, text options and correct answer,
and now it's time to give some functionality to update button.
Before we do that, I want in advance to disable clear at least button during editing the question.
I know that at this point it doesn't have any functionality.
But regardless of that, let's disabled this button.
No.
OK, let's go to Brackett's.
The first thing that we have to do is to select this element.
Let's take a look on index dot file.
After insert button, we have here button for a clear list, it has, I'd attribute questions clear
and so let's copy it and then in dump items object.
Create another property and call it Questions Carlier BGN.
Then selected rights documents.
Dogs, cats, elements by IDI.
And paste your ID questions clear at.
As we said, we want to dissect this button during editing the questions, therefore we're going to
do it inside a. question list function.
In order to disrupt the button, we need to change its style.
So writes Dom items.
That question's clear between.
The old style.
In says we have a property called Pointier Events, which manages how HTML elements act on most events.
So let's use this property right pointer events.
If we want to disturb the button, we need to assign to this property the value none.
OK, let's go to the browser and see how it works, reload.
Then click on edit button.
So when we hover on Khelil this button, it doesn't have Hubber effect anymore.
It means that it's disabled.
All right, now it's time to start updating the questions.
The first thing that we're going to do is to attach click event on update button.
This is the case when it's more convenient to use event handler instead of event listener.
As you know, in case of an event, listener element can hold several events.
But at this point, we want update button to hold only one event.
Anyway, you can feel free and use that event listener, and I'm sure that you will get better what
I'm talking about.
OK, let's write don't items.
That question update PTM.
But unclick.
For updating questions, we are going to create function and let us in advance call it updates question.
And then create the mansion function as function expression, so create the variable and colleagues
update question.
The then assigned to its anonymous function.
And now let's test how this updated question function works right inside it, that log.
Works.
Then go to the browser.
Reload the page, click on edit button, then click on update.
And they say that it works.
OK, now we want to write the code, which will update question item in local storage.
For that, we want to update the contents of found item variable.
Let's change the question text of item four that we have to wait for an item that question text.
Equals to dump items.
That new question text.
That value.
So in case of clicking on edit button, we assign question tags, the phone item to new question tags
of the value, but in case of clicking on update button, we need to assign to question, text or phone
item the value of new question text, which is the content of text area.
Makes sense.
OK, in order to see better and understand it, well, I'm going to test it, let this play in council
found item from outside of function, right?
Concerned that log found item.
It means that this line of code will run when we click on edit button and also that display found item
from inside update question function.
So right for item.
It means that this council, that luck will run when we click on update button, let's go to the browser.
Reloj.
Then click on edit button.
So you see that we have here question whether it's actual content.
Now, let's change the question, text and write, for example, updated.
Then click on update.
And it said that the text of question is changed.
OK, let's check what happens in local storage.
Go to the application.
So you said that in local storage question has its old content.
It's not surprise because we didn't touch local storage, we just changed the content of found item
variable.
So, you know, that content of phone item we got from local storage and after updating its content,
we have to get back to local storage as updated.
All right.
Let's go back to Brackett's.
And at first, Delate, this castle that logs.
The next that we want to do is to set correct cell phone item as empty.
If we do not do it, then we won't be able to validate it.
So right, found item Dodd, correct answer.
Equals two to three.
So we have updated question text and made correct answer as empty, and now it's time to update options
for that, we are going to create an empty array and then in that area, we will collect new options
such as be clear, new variable and call it new options.
And then assign to this variable.
And empty erate.
All right, now we need to select options, actually, they are selected, but we want to select them
in order to get updated number of options for that, let's declare new variable and call it option elements.
Then go to donate items object.
And copy this line.
And assign age to option elements variable.
OK, so the next steps that we are going to do are very similar to the code, which we have written
in Ed's question on lack of storage function, but they will be slightly different.
So the next thing that we have to do is to add options to new options array and also define the correct
answer.
For that.
I'm going to use for loop, so.
Right for then variable equal to zero.
As a condition.
Right eye is less than the length of option elements.
And then I plus plus.
So if the value of options is not empty, then it should be added as a new option to new options.
All right.
For that, we have to use its statement.
And as a condition.
That's right, option elements.
I got value.
Not equals.
Two empty calls.
So if this condition is true, it means that value of option is not empty, therefore, we need to add
it to new options are right.
For that, let's use push method, write new options.
That push.
And as a parameter, let's place your option elements I.
That value.
All right, now it's time to define the correct answer for that, we need another if statement which
will go inside the previous one.
So as a condition, we need to indicate the proper radio button, as Chad, as you remember, radio
buttons are placed in HTML document as previous siblings for text inputs.
So we need to use donor property called previous element sibling and then the property checked, which
returns boolean value.
True or false.
Right option elements.
I.
That previous element, sibling.
And then use checked property.
So if this condition is true, it means that the proper radio button is checked and on that iteration
we have a correct answer.
So right found item, that correct answer.
Equals to option elements.
I got value.
OK, the last step for preparing for an item is to assign to it new options.
All right, let's do it outside Falluja and write an item dot options.
Equals two new options.
All right, phone item is already appropriate, and the next step is to insert it in local storage on
its original place for that.
At first we need to get access on a question list from local storage.
In previous video, we have thought it in get storage question list, so let's use this variable.
Now we have access on Erra in local storage, and in order to insert Funt item, we have to use another
builtin array method in JavaScript, which is called Pliss.
Let's briefly demonstrate in council how this place works, create an array and colleague Carlos.
Then pushier some colors, for example, of red than green.
And below.
Let's suppose that we want to delete, for example, second item Charin four, that we can write colors
that supplies.
This method holds at least two parameters.
The first one indicates the position of item from where you want to delete the item, and the second
one indicates how many items you want to delete.
So in this case, we want to delete green.
Therefore, as a first parameter, we need to place one.
And because of that, we want to delete only one item as a second parameter, we need to pass one again.
So you see that we have new era, which includes the deleted item, but if we check our colors array.
Then we will get it right without green color.
All right, beside that supplies method allows us to replace the item, suppose that we want to replace
blue collar with black.
For that, we have to write colors.
Douglas.
Then as the parameters right one.
Then again, one.
And then black color.
Against this method, the returned array with deleted item.
Let's check Koller's array.
And you said that we have red and black instead of blue.
All right, it's all about supplies method.
Let's go back to Brackett's.
So in our case, police matter will hold three parameters, first one will be position from where we
want to believe the item.
As you remember from previous lecture, we have to find the place of found item in an array using place
in array variable.
So as a first parameter, we have to pass it here.
As the second parameter, we need to place one because we want to delete one item.
And as a third parameter, we need to indicate found item.
Which should be replaced instead of old one.
All right, everything is ready now we just need to overwrite, updated, erase the old one for that.
Let's write storage question list here.
We need to use such question collection methods from local storage object.
And then as a parameter, we have to pass, you get storage question list.
All right, it should already work.
Let's go to the browser, reload the page.
Click on edit.
Then in question, text Wright again updated.
Also, add some more inputs and.
Then change the correct answer.
Click on update.
That revolt and you see that the question text is updated.
If we click on again, then we will get the updated options as well.
Also, if we check local storage, let's go to the application.
We will find updated contents of question.
All right, perfect.
It works, but as you notice, list is not updated dynamically.
We need to reload the page for that.
And also buttons are still displayed.
But before we fix that, I want to validate the inputs and checking the correct answer in order to save
updated question properly.
For that, we have to use, again, several if our statements, as it was in case of that question on
local storage method.
So at first, let's validate the question.
Text, right.
If statement.
As a condition, we have to indicate the question text of an item not to be empty, Sirait found item
that.
Question, text.
Not equals to empty quotes.
Also, we have to surround these lines of code with curly braces.
And that we need to use el statement.
With a large method.
Inside alert method, right, the text, please insert question.
The next we have to validate the options.
So, as you remember, the number of options should be greater than one because we want at least two
options.
So create another if statements.
And as a condition, right front item.
But options?
That length.
Is greater than one.
Then again, below, use statements with.
Alert method.
And right here, the text you must insert.
At least two options.
And the last part is to validate check in the correct answer.
Again, we need to use if statements.
As the condition right found item.
Dot, correct answer not equals.
To empty quotes.
And then use our statement again.
I'm going to copy it from that question on local storage, because it's a little bit long one.
So let's call it.
And then.
Paste it here.
Also, let's organize the code a little bit.
Now it looks better.
Let's go to the browser and test how the validation works, reload the page.
Then click on Added.
Live options without checking, correct answer.
Click on updates and you say that we have alert message saying that we have missed to check, correct
answer.
If we delete, question, text and then click on update, then we will get proper alert message and
the same will be happen.
If we miss filling at least two options.
All right, great, let's stop here.
See you in the next video.