I want to change from a click event to a keypress event

Question

I created a to do list and have it set to add the item when you click the add button but I want to make it to where you can press enter and here is my code:

function addListItem() {
    var text = $("#new-text").val();
    $("#todolist").append('<li><input type="checkbox" class="done"/>'+text+'<button                  class="delete">Delete</button></li>');
    $("#new-text").val('');
}

$(function() {
    $("#add").on('keypress' , addListItem);
}

please help

felipekm · Answer 1 · 2014-04-07T19:58:54.640

1

You can do something such this inside of your addListItem Function:

JS:

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

As your implementation:

function addListItem(event) {
    if(event.which == 13){
        var text = $("#new-text").val();
        $("#todolist").append('<li><input type="checkbox" class="done"/>'+text+'<button                  class="delete">Delete</button></li>');
        $("#new-text").val('');
    }
}

$(function() {
    $("#add").on('keypress' , function(event) { addListItem(event););
}

edited Apr 07 '14 at 19:58

answered Apr 07 '14 at 19:49

felipekm

2,820
5
32
42

`$("#add").on('keypress' , addListItem(this));` is wrong – epascarello Apr 07 '14 at 19:57
Now it's fixed, thanks: $('#add').on('keypress', function(event) { addListItem(event); }); – felipekm Apr 07 '14 at 19:59
You do not even need the function... – epascarello Apr 07 '14 at 20:00

score 0 · Answer 2 · answered Apr 07 '14 at 19:50

Try this out:

function addListItem(event) {
    if(event.which == 13){

        var text = $("#new-text").val();
        $("#todolist").append('<li><input type="checkbox" class="done"/>'+text+'<button                  class="delete">Delete</button></li>');
        $("#new-text").val('');
    }
}

$(function() {
    $("#add").on('keypress' , addListItem);
}

score 0 · Answer 3 · answered Apr 07 '14 at 19:52

0

Check the keyCode in your function:

function something(event){
  if ( event.keyCode == 13 ) 
    alert( 'ENTER!');
}

answered Apr 07 '14 at 19:52

ncksllvn

5,699
2
21
28

score 0 · Answer 4 · answered Apr 07 '14 at 19:54

You need to get the keycode you pressed and check it is the ENTER key.

function addListItem(e) {
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == '13') {
        var text = $("#new-text").val();
        $("#todolist").append('<li><input type="checkbox" class="done"/>'+text+'<button                  class="delete">Delete</button></li>');
        $("#new-text").val('');
        $("#new-text").val('');
    }
});

I want to change from a click event to a keypress event

4 Answers4