how do I get javascript function to run on enter key, as opposed to click?

Don't.

You have a form. Treat it as such.

document.getElementById('input_listName').addEventListener('submit', function(e) { e.preventDefault(); const li = document.createElement('li'); li.append(this.listName.value); document.querySelector(".ul_current").append(li); // optionally: // this.listName.value = "" }, false);

<form id="input_listName"> <input type="text" name="listName" /> <button type="submit">add</button> </form> <ul class="ul_current"></ul>

Making it a form provides all of the benefits that a browser does for you. On desktop, you can press Enter to submit it. On mobile, the virtual keyboard may also provide a quick-access submit button. You could even add validation rules like required to the <input /> element, and the browser will handle it all for you.

I think what you want is a check for which key was pressed, correct?

To do that, you simply need to check for event.keyCode === 13

So your code would be something similar to the following:

$('#btn_createList').keypress(function(event){ if (event.keyCode === 13) { $('.ul_current').append($('<li>', { text: $('#input_listName').val() })); } }); 

Hopefully that does the trick!

With the help of the event, you can catch the pressed enter (keycode = 13) key, as in my example.

Was it necessary?

$('#btn_createList').keypress(function(event){ if (event.keyCode == 13) { $('.ul_current').append($('<li>', { text: $('#input_listName').val() })); } }); 

<input id="input_listName" /><button id="btn_createList">add</button> this syntax is technically wrong, your tag is starting with <input> and ending with </button>. Also you can add a simple check to your function that if user haven't entered anything into the input field that should return nothing.

you can also have a look at this cheat sheet to know more about keycodes https://css-tricks.com/snippets/javascript/javascript-keycodes/

$('#btn_createList').keypress(function(event){ if($('#input_listName').val()) { if (event.keyCode == 13) { $('.ul_current').append($('<li>', { text: $('#input_listName').val() })); } } });

<div id="btn_createList"> <input id="input_listName" type="text"> <ul class="ul_current"> </ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>