Есть массив сolors и есть пустой div с классом test.
1) Нужно добавить в div список, текстом которого будут элементы массива
2) Нужно, чтобы по клику на любую li в ней появлялся инпут, с помощью которого ее можно будет отредактировать.
3) Необходимо, чтобы под списком была кнопка, с помощью которй можно будет добавить новый элемент в конец списка ul. Сделайте так, чтобы новые li также можно было редактировать.
Первые 2 пункта задачи я решила,
а на 3-м застряла, поскольку функция func локальная, а при попытки вынести ее в глобальную ОВ и использовать дальше внутри цикла для перебора элементов массива colors, а впоследствии и для кнопки btn, разрушает весь мой код. Дальше мои лыжи не едут ))
<div class="test"></div>
let colors = ['color1', 'color2', 'color3'];
let div = document.querySelector('.test');
// Создаю список и помещаю его в div
let ul = document.createElement('ul');
div.append(ul);
// Реализовываю задачу (пункт1 + пункт 2)
colors.forEach(function (elem) {
let li = document.createElement('li');
li.textContent = elem;
ul.append(li);
li.addEventListener('click', function func() {
let input = document.createElement('input');
input.value = li.textContent; // записываем в инпут текст абзаца
li.textContent = '';
li.appendChild(input);
input.addEventListener('blur', function () {
li.textContent = this.value;
li.addEventListener('click', func) // повесим событие обратно
})
li.removeEventListener('click', func) // отвяжем событие
})
})
// Реализовываю задачу (пункт3)
let but2 = document.createElement('input');
but2.type = 'button'
but2.value = 'Кнопка для добавления списка';
div.appendChild(but2);
but2.addEventListener('click', function () {
let li = document.createElement('li');
li.textContent = "new element";
ul.append(li);
})
