Javascript 无法解决添加新TODO的问题_Javascript_Jquery_Html

Javascript 无法解决添加新TODO的问题

javascript jquery html

Javascript 无法解决添加新TODO的问题,javascript,jquery,html,Javascript,Jquery,Html,我做了这个Todo项目，其中可以添加Todo，删除Todo，并在已完成的Todo中划线，但我在将新Todo添加到列表中时面临问题，即每次添加新Todo时都会留下一个空白的替代空间，无法找到错误以下是js文件： $("ul").on("click", "li", function(){ $(this).toggleClass("completed"); }); $("ul").on("click","span",function(event){ $(this).parent

我做了这个Todo项目，其中可以添加Todo，删除Todo，并在已完成的Todo中划线，但我在将新Todo添加到列表中时面临问题，即每次添加新Todo时都会留下一个空白的替代空间，无法找到错误

以下是js文件：

$("ul").on("click", "li", function(){
    $(this).toggleClass("completed");

});


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


$("input[type='text']").keypress(function(event){

    if(event.which === 13)
    {
        var todosText=$(this).val();
        $(this).val("");
        $("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")

    }

});

$(".fa-pencil-square").click(function(){
    $("input[type='text']").fadeToggle();
});

$（“ul”）。在（“单击”，“li”，函数（）上）{
$（此）.toggleClass（“已完成”）；
});
$（“ul”）。在（“单击”，“跨距”，功能（事件）{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。按键（函数（事件）{
if（event.which==13）
{
var todosText=$（this.val（）；
$（此）.val（“”）；
$（“ul”）。追加（“”+todosText+“”）
}
});
$（“.fa铅笔方块”）。单击（函数（）{
$（“输入[type='text']”）。fadeToggle（）；
});

html文件：

<!DOCTYPE html>
<html>

<head>
    <title>To Do List</title>
    <script type="text/javascript" src="assests/js/lib/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assests/css/todos.css">
    <link href="https://fonts.googleapis.com/css?family=Gayathri|Open+Sans:600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assests/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Gayathri:700&display=swap" rel="stylesheet">
</head>

<body>
    <div id="container">
    <h1 >TO-DO LIST <i class="fa fa-pencil-square" aria-hidden="true"></i></h1>
    <input type="text" placeholder="Add New Todo">
    <ul>
        <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Check the theme</li>
        <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Go to the store</li>
        <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Select dress </li>
    </ul>
</div>
<script type="text/javascript" src="assests/js/todos.js"></script>
</body>
</html>


待办事项清单
待办事项清单

检查主题
去商店
精选服装

您没有关闭添加新TODO的函数中的

li

标记：

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")

$（“ul”）.append（“”+todosText+””）

应该是

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "</li>")

$（“ul”）.append（“”+todosText+””）

您没有关闭添加新TODO的函数中的

li

标记：

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")

$（“ul”）.append（“”+todosText+””）

应该是

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "</li>")

$（“ul”）.append（“”+todosText+””）

也粘贴css。结束问题作为键入（在

中缺少

）也粘贴css。结束问题作为键入（在

中缺少

）