Как обратиться к соответстующему элементу в DOM дереве?

Question

[Артем Михневич]

Повесил событие , чтобы редактировать записи в TODO . но редактирует только 1 элемент.
( хотел обращаться через ключ в DATA атрибуте, который хранится в LocalStorage , но цифра противоположная индексу элемента. Если смотреть на список как массив. )

Как обраться именно к тому элементу , по которому нажимаю ? вот выборка самой функции. и ссылка на реп.
https://github.com/vanholler/todo/tree/master/js

function editItem () {
         debugger;
     event.preventDefault()
           var value2 = doc.getElementById('todo');
            var edit = doc.createElement('input');
//        var   key_attr_global_var = item.getAttribute('data-key'); 
         
          var vallet = doc.getElementById('todo');    // тут ошибка , не могу обратиться к нужному элементу
          // буду обращаться к ключу атрибута , чтобы распознать на какой элемент нажал [key_glob]
         
             edit.classList.add('editor');
             vallet.appendChild(edit);
              edit.value =  sodo;   // сюда вставить переменную со значение которое взяли из списка li
             edit.addEventListener('keyup', key);
         
         
function key(event) {
   if (event.which == 13 || event.keyCode == 13) {    //  по нажатию Enter сохранить
             
           var  val_ed = edit.value;
           edit.remove();
iitt.getElementsByTagName('span')[0].innerHTML = val_ed;   // тут возращаем значение в li
     sodo  =  val_ed ;                                    // тут обновляем переменую sodo , чтобы можно было повторно редактировать
   }else {
  return false;
}
}; // функция key
}; // функция editItem

Comments

[Артем Михневич]

и да , есть ещё косяк с тем что беру значения только из первого элемента, но мой вопрос должен решить 2 проблемы сразу.

Answer 1

[Exploding]

Что-то вообще тут намудрили такого))
Зачем вы создаете 2 идентичные переменные value2 и через строку сразу же vallet?
Может быть проще редактируемым элементам установить класс и на него повесить обработчик события, в котором this будет вашим искомым элементом?
И зачем edit-ы разные пихать, если есть contentEditable?
Такое должно что-то получиться, как я понимаю?

Comments

[Артем Михневич]

о боже )))) ну намудрил, потому что пробовал многие варианты, и забыл почистить код перед вопросом. )))

Но если бы я знал про существование contenteditable="true" , я был бы счаслив ))) крутая штука, которая решила все мои проблемы. спасибо!!!!!!

[Exploding]

Артем Михневич, Пожалуйста:) Кстати и горячие сочетания клавиш для задания стиля текста например, в этом режиме тоже работают: ctrl+b (жирный), ctrl+i (курсив), ctrl+u (подчеркнутый)
Других не знаю))

[Артем Михневич]

Exploding, ещё раз спасибо ) очень нужная инфа )))