how do i add keyboard shortcut enter to jquery to do list

Question

I'm new to jquery and I'm making my first project which is a basic to do list. Im trying to make it work when someone presses enter but for some reason nothing is happening.

$(document).ready(function() {
  $("#btn2").click(
    function() {
      var toAdd = $("#listItem").val();
      $("ol").append("<li>" + toAdd + "</li>");
    });
});

$(document).on('dblclick', 'li', function() {
  $(this).toggleClass('strike').fadeOut('slow');
});

$('#listItem').keypress(function(event) {
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
        var toAdd = $("#listItem").val();



        $("ol").append("<li>" + toAdd + "</li>");
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<form name="toDoList">
  <input type="text" id="listItem" name="ListItem" />
</form>
<ol>
</ol>
<button id="btn2">Add something</button>
<p>something</p>
<p>ldldl</p>

Welcome to SO. Please read [mcve] - I create a snippet for you. As you can see when pressing TIDY it is not complete. Also look at the console when clicking. You also had invalid HTML with html in the head and so on — mplungjan, Jan 29 '17 at 07:19

mplungjan · Accepted Answer · 2017-01-29T07:46:28.350

added ALL the event handling to the load event
closed the brackets
removed ) from if
added class
event.which is normalised by jQuery

$(function() {
  $("#btn2").click(function() {
    var toAdd = $("#listItem").val();
    $("ol").append("<li>" + toAdd + "</li>");
  });
  $("#listItem").keypress(function(e) {
    var keycode = e.which;
    if (keycode == '13') {
      var toAdd = $("#listItem").val();
      $("ol").append("<li>" + toAdd + "</li>");
    }
  });
});

$(document).on('dblclick', 'li', function() {
  $(this).toggleClass('strike').fadeOut('slow');
});

.strike { text-decoration:line-through}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<form name="toDoList">
  <input type="text" id="listItem" name="ListItem" />
</form>
<ol>
</ol>
<button id="btn2">Add something</button>
<p>something</p>
<p>ldldl</p>

Some browsers use keycode, some which. but jQuery normalises it: http://stackoverflow.com/questions/12172646/event-keycode-vs-event-which — mplungjan, Jan 29 '17 at 07:47

how do i add keyboard shortcut enter to jquery to do list

1 Answers1