追加待办事项列表

Appending a to-do list

本文关键字：列表 追加      更新时间：2023-09-26

我正在尝试制作一个"待办事项列表"应用程序。我正在尝试使用"完成"按钮将我在输入中输入的内容附加到"待办事项"下的列表中。这是我到目前为止所拥有的：

.HTML：

<!DOCTYPE html>
<html>
    <link rel="stylesheet" text="text/css" href="doneit.css">
        <head>
            <script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
            </script>
        </head>
  <body>
        <div id="container">
             <input type="text" id="task" placeholder="New Task"/>
                <button id="enter">Enter</button>
                    <div class="todo">
                        <ul id="chores"><h2>To Do:</h2></ul>
                    </div>
                <button id="reset">New List</button>
        </div>
    <script type="text/javascript" src="doneit.js"></script>
  </body>
</html>

和Javascript：

$(document).ready(
 function() {
var chores=[];
$("#enter").click(function () {
    var task = $("#task").val();
    var $btn = $('<button />', {
        id: "check",
        type: "button",
        text: "Done",
        value: task,
        click: function(){
            var did = this.value;
            $("#todo").append('<p>'+  check+'</p>');
            chores.push(check); 
        }
    });

$(".reset").click(function() {
    location.reload();
});

您的代码中存在一些错误，并且不清楚您想要实现的输出。我不得不改变一些东西，但你可以做这样的事情并把它作为基础。

.HTML：

<div id="container">
    <input type="text" id="task" placeholder="New Task"/>
    <button id="enter">Enter</button>
    <div class="todo">
        <ul id="chores">To Do:</ul>
    </div>
    <button id="reset">New List</button>
</div>

JavaScript：

var chores = [];
$("#enter").click(function () {
    var task = $("#task").val();
    var btn = $('<button/>',
            {
                text: "Done",
                value: task,
                click: function () {
                    alert('clicked');
                }
            });
    $("#chores").append('<li>');
    $("#chores").append(task);
    $("#chores").append(btn);
    $("#chores").append('</li>');
    chores.push(task);
});
$("#reset").click(function () {
    $("#chores").empty();
    chores = [];
});

一些重要注意事项：

  • 了解 $（.class） 与 $（#id） 之间的区别
  • 不应有多个具有相同 id 的元素
  • 遵循 charlietfl 建议;控制台是你的朋友
  • 使用 IDE 或在线验证标记
  • 您无需重新加载页面即可清除列表

在你的 JavaScript 代码中，你使用的是一个名为 check 的非现存变量，而你应该使用 did 或 this.value 。此外，似乎您没有在任何地方插入新创建的按钮，因此用户将无法单击它。

相关文章：