Calling a function when enter key is pressed with JavaScript

Question

I am using addEventListener to bind an event to a node. The addEventListener adds addItem function to node. But when I press enter the function is not running.

Here is the 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 = '';
}

Here is the HTML:

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

On other hand the function runs with click

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

I want to do this with JavaScript only not using jQuery library.

Edited: I want to attach the event to input field.

Do you have an element with a `add-item` ID? Is that item focuses when you press enter? [Here's a working example of your code.](https://jsfiddle.net/ymcp11ad/) — Mike Cluck, Apr 12 '16 at 16:40
@MaihanNijat As j08691 said, post a minimal, complete and verifiable example. I've edited my first comment to include an example of your code working. — Mike Cluck, Apr 12 '16 at 16:43
Refer this SO answer http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — Pugazh, Apr 12 '16 at 16:45
Are you sure you want to put the handler on the `` tag? That means that the user needs to tab over to the `+` before pressing enter to make it work. You should probably attach this event to the ``. Also, if it works fine with "click" (as it should) then why not use that? — Mike Cluck, Apr 12 '16 at 16:48
@MaihanNijat Then just replace `'add-item'` with `'new-item-text'` and it will work. — Mike Cluck, Apr 12 '16 at 16:51

score 3 · Accepted Answer · answered Apr 12 '16 at 16:47

I'm willing to place a bet that the add-item element isn't in focus when you press enter. Instead, try changing the trigger to be the input field.

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

Calling a function when enter key is pressed with JavaScript

1 Answers1