Polo554445
@Polo554445

Как решить задачу по изменению элементов JS c помощью input?

Есть массив с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);
})
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
neuotq
@neuotq
Прокрастинация
Хорошо бы let не использовать если в этом нет необходимости(в данном случае не супер критично).
Я бы посоветовал вывести нужные штуки в отдельные функции, которые вызываются по необходимости.
Тогда будет универсальный подход и свобода действий.
Отдельная функция на то, чтобы поставить слушалку события на клик, которая примет как параметр элемент - решит вашу проблему.
Вот код и демо на кодпене
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Включаем цыганскую магию:
1) Листенер вешаем на ul
2) При событии проверяем евент таргет, если это li, то делаем грязные цыганские штучки с текущим таргетом (все что у вас там срабатывало по клику на ли).
3) Профит, вы прекрасны, идете пить кофий с круассаном...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы