How to make an editable link?

The challenge is to make a link which will be a button that depending on the clicking will become a edit button (and thus the reference value can be changed), or the save button (the reference value is stored)
I have an idea on how to implement it, namely:
Make the block reference and the block input type="text", one of which will be hide and appear depending on the situation
For example, initially the link will be displayed, when you click on the edit button, the block with the link will disappear, and you receive input. Its value is being edited and clicking the edit button/save hidden input and its value is passed to the link, and so many times
Is there any option to realize this better and easier? In addition, there are no options in the head do not climb, and this is not particularly clear how best to implement it.
There must be input and must be a link.
And it is not clear how to change the values of the buttons edit/save, it must be a single
March 12th 20 at 08:40
2 answers
March 12th 20 at 08:42
all right, link, vanishing input and button.
With a button to do so: Initializeerror state (since there are only two States, a Boolean variable btnState) and in the handler by clicking on the button performs the desired action:
if (btnState) {
 // show input, model the button "save"
} else {
 //hide the input, replace the link href to display the link
btnState = !btnState; // (invert the state of the button)
March 12th 20 at 08:44
externally works a bit wrong as you described.
Examine the source code
Learn a lot

Find more questions by tags HTMLJavaScriptCSS