任何人都可以告訴我做錯了什麼？

-1

我正在嘗試使用HTML，CSS和jQuery製作一個簡單的待辦事項列表，而且我正面臨一個問題，它不會添加新的待辦事項輸入，因爲我想要它們，這裏是代碼，如果任何人都可以點在哪裏我做錯了。任何人都可以告訴我做錯了什麼？

// HTML 這裏的HTML標籤，它看起來對我罰款

<head> 
<title>TODO list</title> 
<link rel="stylesheet" type="text/css" href="assests/css/todos.css"> 
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
<script type="text/javascript" src="assests/js/lib/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <h1>TO-DO List<i class="fa fa-plus"></i></h1> 
     <input type="text" placeholder="Add New Todo"> 
     <ul> 
      <li><span><i class="fa fa-trash"></i></span> Go To Potions Class</li> 
      <li><span><i class="fa fa-trash"></i></span> Buy New Robes</li> 
     <li><span><i class="fa fa-trash"></i></span> Visit Hogrid</li> 
     </ul> 
    </div> 
<script type="text/javascript" src="assests/js/todos.js"></script> 
</body>

// CSS

h1{ 
    background: #2980b9; 
    color: white; 
    margin: 0; 
    padding: 10px 20px; 
    text-transform: uppercase; 
    font-size: 24px; 
    font-weight: normal; 
} 
ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#container{ 
    box-shadow: 0 0 3px rgba(0,0,0, 0.1); 
    width: 360px; 
    margin: 100px auto; 
    background: #f7f7f7; 
} 

.completed{ 
    color: gray; 
    text-decoration: line-through; 
} 
body{ 
    font-family: 'Roboto', sans-serif; 
    background: #2BC0E4; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to right, #EAECC6, #2BC0E4); /*  Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to right, #EAECC6, #2BC0E4); /* W3C, IE 10+/  Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 
li{ 
    background: white; 
    height: 40px; 
    line-height: 40px; 
    color: #666; 
} 
li:nth-child(2n){ 
    background: #f7f7f7; 
} 

input{ 
    font-size: 18px; 
    background:#f7f7f7; 
    width: 100%; 
    padding: 13px 13px 20px 20px; 
    box-sizing:border-box; 
    color: #2980b9; 
    border:3px solid rgba(0,0,0,0); 
} 
input:focus{ 
    background:white; 
    border: 3px solid #2980b9; 
    outline: none; 
} 

.fa-plus{ 
    float: right; 
} 
span{ 
    background-color: #e74c3c; 
    height:40px; 
    margin-right: 20px; 
    text-align: center; 
    color: white; 
    width:0px; 
    display:inline-block; 
    transition: 0.2s linear; 
    opacity:0; 
} 
li:hover span{ 
    width:40px; 
    opacity:1.0; 
}

// jQuery的

而這裏的jQuery的標籤，我繼「Web Developer Bootcamp」課程後，我必須使用這些代碼編寫TO-DO列表，並且編寫完全相同的代碼，但它仍然不起作用，當我想添加新的TO-Dos時，它將添加但不是因爲它創造了一個空白的裏面，當我將它懸停在裏面時，它以典型的方式出現。 //通過點擊

$("ul").on("click","li",function(){ 
    $(this).toggleClass("completed"); 
}); 
//click on X to delete TODO 


$("ul").on("click","span",function(event){ 
    //to remove parent lis 
    $(this).parent().fadeOut(500,function(){ 
    $(this).remove(); 
}); 
event.stopPropagation(); 
}); 

//adding new TODO 

$("input[type='text'").keypress(function(event){ 
    if(event.which===13){ 
     //grabbing new TODO text from input 
    var todoText= $(this).val(); 
    $(this).val(""); 
    //create a new li and add to ul 
    $("ul").append("<li><span><i class='fa fa-trash'><span> " + todoText +"</li>") 
    } 
});

來源

2017-08-30 Ankur Dutta