2

So I am trying to create a todo list using JQuery, JavasScript, and HTML. I am not able to figure out how to make the add button(adds tasks to the list) also add when the enter key is pressed. I have tried multiple things online such as if statements with (keyCode == 13) and whatnot.

I have attached my HTML and JavaScript files.

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 deleteItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().remove(); }else{ $(this).parent().remove(); } } function finishItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().css('textDecoration', 'none'); }else{ $(this).parent().css('textDecoration', 'line-through'); } } $(function() { $("#add").on('click', addListItem); $(document).on('click', '.delete', deleteItem); $(document).on('click', '.done', finishItem); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="TodoListJquery.js"></script> </head> <body> <h1>To-Do List</h1> <ul id="todolist"> <li><input type="checkbox" class="done"/> Clean house <button class = "delete">Delete</button></li> <li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Delete</button></li> </ul> <input type="text" id="new-text" /><button id="add">Add</button> </body> </html>

Please Help!

Improve this question
2
  • The top is the Javascript and the bottom is the HTML. Thanks! Commented Sep 24, 2018 at 5:56
  • You can use form tag and button, then enter will be post form out of the box, you can control the submit event using jQuery (if you prefer to submit data to server using ajax) Commented Sep 24, 2018 at 6:04

3 Answers 3

Reset to default
5

1.Add jQuery library (It's missing in your code)

2.Add keydown event-listener on text-box and check enter key is presses or not? if yes, the call the addListItem() function

Just add below code inside $(function(){..});

$('#new-text').keydown(function(e){ if(e.keyCode === 13){ addListItem(); } });

Working snippet:- 

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 deleteItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().remove(); }else{ $(this).parent().remove(); } } function finishItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().css('textDecoration', 'none'); }else{ $(this).parent().css('textDecoration', 'line-through'); } } $(function() { $('input[type=text]').keydown(function(e){ if(e.keyCode === 13){ addListItem(); } }); $("#add").on('click', addListItem); $(document).on('click', '.delete', deleteItem); $(document).on('click', '.done', finishItem); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="TodoListJquery.js"></script> </head> <body> <h1>To-Do List</h1> <ul id="todolist"> <li><input type="checkbox" class="done"/> Clean house <button class = "delete">Delete</button></li> <li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Delete</button></li> </ul> <input type="text" id="new-text" /><button id="add">Add</button> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@CTestPython glad to help you. Please don't forget to mark the answer
That should work. Could also wrap the new input in a form and capture the form submit, as pressing Enter is already part of submiting a form (concept of not reinventing the wheel)
Marked the answer. Thanks again.
I had one question. Wasn't the Jquery Library already added with the line <script type="text/javascript" src="jquery.js"></script> ?
@CTestPython that's your local setup. I have to add to run the code. If you have then remove other one
0

Try Following

You missed to add jquery library

I have added the keyup event to add new button

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 deleteItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().remove(); }else{ $(this).parent().remove(); } } function finishItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().css('textDecoration', 'none'); }else{ $(this).parent().css('textDecoration', 'line-through'); } } $(function() { $("#add").on('click', addListItem); $(document).on('click', '.delete', deleteItem); $(document).on('click', '.done', finishItem); }); $(document).on('keyup','#new-text',function(e){ if (e.which == 13) { addListItem(); } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="TodoListJquery.js"></script> </head> <body> <h1>To-Do List</h1> <ul id="todolist"> <li><input type="checkbox" class="done"/> Clean house <button class = "delete">Delete</button></li> <li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Delete</button></li> </ul> <input type="text" id="new-text" /><button id="add">Add</button> </body> </html>

Improve this answer

Comments

0 
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 deleteItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().remove(); }else{ $(this).parent().remove(); } } function finishItem(){ if($(this).parent().css('textDecoration') == 'line-through' ) { $(this).parent().css('textDecoration', 'none'); }else{ $(this).parent().css('textDecoration', 'line-through'); } } function onKeyUp(event) { if (event.keyCode === 13) { addListItem() } } $(function() { $("#add").on('click', addListItem); $(document).on('click', '.delete', deleteItem); $(document).on('click', '.done', finishItem); $('#new-text').on('keyup', onKeyUp) });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.