Question

我正在尝试制作一个“待办事项列表”应用。我试图通过“完成”按钮将我输入的内容附加到“待办事项”下的列表中。以下是我到目前为止的情况：

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

});

Answer 1

在您的JavaScript代码中，您使用的是名为async.eachSeries(categories, function(category, callback) { client.itemSearch({ searchIndex: configuration.SearchIndex, CategoryID: category.id, Keywords: currentKeyword }).then(function(results) { // we don't need to wait after the database here, just after the request setTimeout(callback, 1000); var title = results[0].Title; var cat = category.name; var price = results[0].Price; db.insertProduct(title, cat, price); }).catch(callback); }, function(err) { if (err) { console.log('error', err); } });的非现存变量，而您应该使用check或did。此外，您似乎没有在任何地方插入新创建的按钮，因此用户无法点击它。

Answer 2

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

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或在线验证您的标记
您无需重新加载页面即可清除列表

附加待办事项列表

2 个答案: