Пусть теперь у нас есть не один абзац, а много:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Давайте сделаем так, чтобы по клику на любой абзац в нем появлялся инпут для редактирование.
На самом деле такая задача для нас не представляет сложности, так как почти весь код был получен нами в предыдущем уроке.
Для решения нашей задачи просто запустим цикл по абзацам и в цикле используем код предыдущего урока (этот код даже не понадобится изменять):
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function func() {
let input = document.createElement('input');
input.value = elem.innerHTML;
elem.innerHTML = '';
elem.appendChild(input);
input.addEventListener('blur', function() {
elem.innerHTML = this.value;
elem.addEventListener('click', func);
});
elem.removeEventListener('click', func);
});
}
Дан тег ul. Сделайте так, чтобы по
клику на любую li в ней появлялся
инпут, с помощью которого можно будет поредатировать
текст этой li.
Дана HTML таблица. Сделайте так, чтобы по клику на любую ячейку в ней появлялся инпут для редактирования текста этой ячейки.