У меня несколько иной случай, в вашем примере элементы списка уже есть, в моем же случае, в начале просто строка (input) для добавления элементов. И поэтому начинает ругаться на addEventListener.
http://prntscr.com/k22b5v
Поэтому, у меня тоже возникают проблемы при моих попытках добавить событие на input.
Когда добавляю событие на input (его же по логике пока нет, он null, он начинает ругаться). Пробовал делать например при keyup делать еще div.replacChild(span, div.firstChild) - поменять первый элемент (input), на span, ведь изначально первый элемент - простая строка, не тег. Поэтому я решил поменять на span.
У меня сейчас проблема, как я писал выше, не добавляет событие на инпут, пишет, мол это не функция
http://prntscr.com/k22ijs
Вот код на смену элемента списка на инпут, и обратно. Проблема в обратном. Просто, как мне кажется, у меня почти все правильно, но где то можно исправить пару строк на данный момент
list.addEventListener('click', function(event) {
if(event.target.tagName === "BUTTON") {
var div = event.target.parentNode;
var target = event ? event.target : window.event.srcElement;
var input = document.createElement('input');
input.className = 'data';
input.value = div.firstChild.data;
div.replaceChild(input, div.firstChild);
if (div == target) input.focus();
}
}, false);
var input = document.getElementsByClassName('.data');
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
var div = event.target.parentNode;
var span = document.createElement('span');
span.data = div.firstChild.value;
div.replaceChild(span, div.firstChild);
};
}, false);