Anahtar girilirken bir işlev çağırmak, JavaScript

Question

ile bir düğüme basılıyor Bir olayı bir düğüme bağlamak için addEventListener kullanıyorum. addEventListener, düğüme addItem işlevini ekler. Ama bastığımda, fonksiyon çalışmıyor.

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

Öte yandan fonksiyon Ben JavaScript ile bunu yapmak istiyor click

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

ile çalışır: Burada

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: Burada

JavaScript'tir sadece jQuery kütüphanesi kullanmıyor.

Düzenlendi: Olayı giriş alanına eklemek istiyorum.

Answer 1

Giriş düğmesine bastığınızda add-item öğesinin odaklanmadığı bir bahis koymayı tercih ediyorum. Bunun yerine, giriş alanı olmak için tetiği değiştirmeyi deneyin.

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