Editing in a group of elements in JavaScript
Let now we have not single paragraph, but many:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Let's make it so that when you click on any paragraph, an input for editing appears in it.
In fact, such a task is not difficult for us, since almost all the code was obtained by us in the previous lesson.
To solve our problem, we simply run a loop through paragraphs and use the code from the previous lesson in the loop (this code doesn't even need to be changed):
let elems = document.querySelectorAll('p');
for (let elem of elems) {
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);
});
elem.removeEventListener('click', func);
});
}
The ul
tag is given. Make it so that by
clicking on any li
an input appears in
it, using it you can edit the text of
this li
.
Given an HTML table. Make it so that when you click on any cell in it, an input appears for editing the text of this cell.