тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Редактирование отдельного элемента на JavaScript

Сейчас мы с вами научимся редактировать тексты элементов с помощью полей ввода. Начнем с простых вещей и будем постепенно усложнять.

Итак, пусть у нас даны абзац и инпут, расположенные в одном родителе:

<div id="parent"> <p id="elem">text</p> <input id="input"> </div>

Давайте сделаем так, чтобы по потери фокуса в инпуте его текст появлялся в абзаце:

let elem = document.querySelector('#elem'); let input = document.querySelector('#input'); input.addEventListener('blur', function() { elem.innerHTML = this.value; });

Давайте теперь сделаем так, чтобы по заходу на страницу в инпуте уже стоял текст абзаца. Таким образом мы с помощью инпута сможем редактировать текст, расположенный в абзаце.

Реализуем:

let elem = document.querySelector('#elem'); let input = document.querySelector('#input'); input.value = elem.innerHTML; // записываем в инпут текст абзаца input.addEventListener('blur', function() { elem.innerHTML = this.value; });

Модифицируйте приведенный выше код так, чтобы текст абзаца менялся не по потери фокуса, а по мере ввода текста в инпут.

Появление инпута

Давайте теперь сделаем так, чтобы инпута изначально не было на странице, а он появлялся по клику на абзац. То есть наш начальный HTML будет выглядеть так:

<div id="parent"> <p id="elem">text</p> </div>

Для начала просто реализуем появление инпута, без редактирования:

let elem = document.querySelector('#elem'); elem.addEventListener('click', function() { let input = document.createElement('input'); input.value = elem.innerHTML; elem.parentElement.appendChild(input); });

А теперь давайте сделаем так, чтобы по потери фокуса в инпуте менялся текст абзаца:

let elem = document.querySelector('#elem'); elem.addEventListener('click', function() { let input = document.createElement('input'); input.value = elem.innerHTML; input.addEventListener('blur', function() { elem.innerHTML = this.value; }); elem.parentElement.appendChild(input); });

Наш код, однако, несовершенен, так как каждое нажатие на абзац будет приводить к появлению нового инпута.

Для решения проблемы просто будем по потери фокуса удалять текущий инпут:

let elem = document.querySelector('#elem'); elem.addEventListener('click', function() { let input = document.createElement('input'); input.value = elem.innerHTML; input.addEventListener('blur', function() { elem.innerHTML = this.value; this.parentElement.removeChild(this); // удалим инпут }); elem.parentElement.appendChild(input); });

Самостоятельно, не подсматривая в мой код, решите описанную задачу.