Skip to main content

Return to Answer

deleted 32 characters in body
Source Link
Death-is-the-real-truth
Death-is-the-real-truth
  • 72.3k
  • 10
  • 59
  • 105

2.Add keydown event-listener on text-box and check enter key is presses or not? if yes, trigger the click event ofcall the addaddListItem() buttonfunction

 $('#new-text').keydown(function(e){   if(e.keyCode === 13){   $("#add").triggeraddListItem('click');   }  }); 
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){ $("#add").triggeraddListItem('click'); } }); $("#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>

2.Add keydown event-listener on text-box and check enter key is presses or not? if yes, trigger the click event of add button

 $('#new-text').keydown(function(e){   if(e.keyCode === 13){   $("#add").trigger('click');   }  }); 
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){ $("#add").trigger('click'); } }); $("#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>

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

$('#new-text').keydown(function(e){ if(e.keyCode === 13){ addListItem(); } }); 
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>
edited body
Source Link
Death-is-the-real-truth
Death-is-the-real-truth
  • 72.3k
  • 10
  • 59
  • 105

2.Add keydown event-listener on text-box and check enter key is presses or not? if yes, trigeertrigger the click event of add button

2.Add keydown event-listener on text-box and check enter key is presses or not? if yes, trigeer the click event of add button

2.Add keydown event-listener on text-box and check enter key is presses or not? if yes, trigger the click event of add button

Source Link
Death-is-the-real-truth
Death-is-the-real-truth
  • 72.3k
  • 10
  • 59
  • 105

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, trigeer the click event of add button

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

 $('#new-text').keydown(function(e){ if(e.keyCode === 13){ $("#add").trigger('click'); } });

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){ $("#add").trigger('click'); } }); $("#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>