Hiding text while editing an element in JavaScript

Let's now make it so that when editing, the input appears in the paragraph itself - instead of the text of this paragraph. Let then, at the end of editing, the input will be removed, and instead of it, the paragraph text will appear again.

Let's start implementation.

First, let's make it so that when you click on the paragraph, an input with the text of this paragraph is added to the end of it:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
});

Our code, however, is very imperfect - every time you click on a paragraph, a new input will be added to it.

In this case, if the first input contains the text of the paragraph, then the second input will already contain the text of the paragraph along with the first input, and the third input will already contain the text of the paragraph along with two inputs, and so on.

Also note that clicking on the added input will be treated as a click on the paragraph: the fact is that the input is in the paragraph, and clicking on the input will simply float above this paragraph.

This will lead to the fact that after the appearance of the first input when trying to click on it in order to start editing, we will automatically click on the paragraph with all the ensuing consequences.

So, the problem is described. Let's fix it now.

To do this, simply unbind the click handler from the paragraph when an input appears. In this case, only the first click on the paragraph will result in an input, and other clicks after the input appearance will be ignored.

Реализуем:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
	
	elem.removeEventListener('click', func); // unbinds the event
});

Let's now make it so that when an input appears, the text of the paragraph itself disappears. To do this, before inserting the input of the paragraph, assign an empty string to textContent:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // first writes the text of the paragraph to the input
	elem.textContent = ''; // then removes the paragraph text
	elem.appendChild(input); // then inserts the input
	
	elem.removeEventListener('click', func);
});

Let's now make it so that when focus is lost in the input, its text is written in a paragraph:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent;
	elem.textContent = '';
	elem.appendChild(input);
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.removeEventListener('click', func);
});

Note that we don't need to remove the input - it removes itself when it writes its text to the paragraph: since the input is part of the text of the paragraph, writing some text to this paragraph simply removes our input, and that's it.

However, we have another problem: the text of the paragraph will only be edited the first time. After the first edit, clicking the paragraph text again will do nothing.

The fact is that at the moment the input appeared, we unbound the event from the paragraph for the reasons described above. Now we need to bind the event back at the end of editing.

Let's do it:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.textContent = '';
	elem.appendChild(input);
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		elem.addEventListener('click', func); // hangs the event back
	});
	
	elem.removeEventListener('click', func);
});

On your own, without looking into my code, solve the described problem.