0

在我的正常职业生涯中仍然在学习这门语言，当我有机会整理简单的例子时。这是一个待办事项列表，用户在其中输入一项杂务并单击按钮提交要在下面显示的条目。然而，下面的代码，尽管它看起来（对我来说）是正确的，但它不会像预期的那样......

HTML（在 Body 标签之间）

<div id="toDoContainer">
    <h1>To Do</h1>
    <p>Here's your very own to do list, complete with added jQuery</p>
    <form id="toDo">
        <input type="text" name"toDoEntry" />
        <button id="addButton">Add</button>
    </form>

    <div id="toDoList"></div>

    <p>Tick a box next to your entry show as complete</p>
</div>

查询：

$(document).ready(function(){
    $('button').click(function() {
        var toDoItem = $('input[name=toDoEntry]').val();
        if(toDoItem.length === 0) {
            alert('You need to add an entry into the toDo list');
        } else {
            $('#toDoList').append(toDoItem);
        }
    });
});

关于我哪里出错的任何想法？

西蒙

4

2 回答 2

4

您有一个简单的 HTML 语法错误。

改变：

 <input type="text" name"toDoEntry" />

至：

 <input type="text" name="toDoEntry" />

同时删除您的<form>标签。这将使您远离页面的当前实例。

有关 HTML 表单的更多信息，请阅读这篇有用的博客文章：

http://webdesign.about.com/od/forms/ss/html-forms-tutorial.htm

我还建议拆分您的“待办事项”，否则它们将相互连接。

例如，如果您添加“任务 1”和“任务 2”，这将成为“任务 1Task2”。我建议将它们放在一个<ul>列表中：

$(document).ready(function(){
    $('button').click(function() {
        var toDoItem = $('input[name=toDoEntry]').val();
        if(toDoItem.length === 0) {
            alert('You need to add an entry into the toDo list');
        } else {
            var $li = $("<li/>");
            $li.append(toDoItem);
            $('#toDoList').append($li);
        }
    });
});​

-- 查看工作演示 --

于 2012-12-04T10:20:46.770 回答
3

写

 <input type="text" name="toDoEntry" />

反而

<input type="text" name"toDoEntry" />

你忘记了“=”

于 2012-12-04T10:19:50.733 回答