Вызов функции при нажатии клавиши с помощью JavaScript

Question

Я использую addEventListener для привязки события к узлу. addEventListener добавляет функцию addItem к узлу. Но когда я нажимаю кнопку ввода, функция не работает.

Вот JavaScript:

document.getElementById('add-item').addEventListener('keypress', function (e) { 
    if (e.keyCode == 13) { 
      addItem(); 
    } 
}, false); 

function addItem() { 
    var list = document.querySelector('ul.todo-list'); 
    var newItem = document.getElementById('new-item-text').value; 
    var newListItem = document.createElement('li'); 
    newListItem.className = 'todo-item'; 
    newListItem.innerHTML = newItem + '<span class="remove"></span>'; 
    list.insertBefore(newListItem, document.querySelector('.todo-new')); 

    //1. Empty the Input field once the item 
    document.getElementsByTagName('input')[0].value = ''; 
} 

Вот HTML:

<li class='todo-new'> 
    <input id='new-item-text' type='text'/> 
    <a id='add-item' href='#'>+</a> 
</li> 

С другой стороны, функция работает с click

document.getElementById('add-item').addEventListener('click', addItem, false); 

Я хочу сделать это с помощью JavaScript только не используя библиотеку jQuery.

Отредактировано: Я хочу прикрепить событие к полю ввода.

Answer 1

Я готов сделать ставку, что элемент add-item не находится в фокусе при нажатии кнопки ввода. Вместо этого попробуйте изменить триггер как поле ввода.

document.getElementById('new-item-text').addEventListener('keypress', function (e) { 
    if (e.keyCode == 13) { 
      addItem(); 
    } 
}, false);