Question

我正在阅读初学者的教程，但我的代码已经无效了。我不能为我的生活看到我的代码与提供的教程代码有何不同。谁能告诉我什么是错的？

HTML：

<!DOCTYPE html><html>
<head>
<title>To Do List</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>To Do List</h1>
<form name="checkListForm">
    <input type="text" name="checkListItem" value="Add to do item> here!"/>
</form>
<button>Add</button><br/>
<div id="toDoItems">
</div>
</body>
</html>

JS：

$(document).ready(function() {
    $('button').click(function() {
        var toAdd = $("input[name=checkListItem]").val();
        $('#toDoItems').append("<p>"toAdd"</p>");
    });
});

Answer 1

您需要在scripts.js

之前加入jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

以及使用+在javascript中连接您的值：

$('#toDoItems').append("<p>" + toAdd +"</p>");

Answer 2

在包含脚本之前包含jQuery库

<!DOCTYPE html><html>
    <head>
        <title>To Do List</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!-- including jQuery library                                               -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <h1>To Do List</h1>
        <form name="checkListForm">
            <input type="text" name="checkListItem" value="Add to do item> here!"/>
        </form>
        <button>Add</button><br/>
        <div id="toDoItems">
        </div>
    </body>
</html>

并使用+

连接字符串

$(document).ready(function() {
    $('button').click(function() {
        var toAdd = $("input[name=checkListItem]").val();
        $('#toDoItems').append("<p>" + toAdd + "</p>");
        //                       ----^-------^------
    });
});

Fiddle Demo

如果它不起作用，那么它不是在页面中包含外部脚本文件包含代码，而是在我的浏览器中完美运行

<!DOCTYPE html><html>
    <head>
        <title>To Do List</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!-- including jQuery library                                               -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('button').click(function() {
                    var toAdd = $("input[name=checkListItem]").val();
                    $('#toDoItems').append("<p>" + toAdd + "</p>");
                    //                       ----^-------^------
                });
            });
        </script>
    </head>
    <body>
        <h1>To Do List</h1>
        <form name="checkListForm">
            <input type="text" name="checkListItem" value="Add to do item> here!"/>
        </form>
        <button>Add</button><br/>
        <div id="toDoItems">
        </div>
    </body>
</html>

如果它正常工作，那么您的脚本script.js的路径会出现问题。

刚开始学习jquery和代码无法正常工作

2 个答案: