Question

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

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>

JQUERY：

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

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

西蒙

Answer 1

您有一个简单的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);
        }
    });
});

-- SEE WORKING DEMO --

Answer 2

写

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

代替

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

你忘记了“=”

jQuery - 代码看起来正确但不起作用

HTML（在Body标签之间）

JQUERY：

2 个答案: