CODEWITHSUNDEEP
javascriptjqueryhtml
CTest Python
CTest Python

Reputation: 57

JQuery Enter Key

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!

Upvotes: 2

Views: 94

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

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>

Upvotes: 5

subhasis
subhasis

Reputation: 298

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)
});

Upvotes: 0

Som
Som

Reputation: 598

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>

Upvotes: 0

Related Questions