Question

很有可能这可能是一个重复的问题，但我找不到似乎可以解决我的问题的答案。我正在尝试创建一个jQuery位，其中文本输入到文本框中，单击一个按钮，文本框中的文本将附加到div。最终产品是制作游戏，但是现在我只是想确保变量存储并放入div中。这是我的HTML

<!DOCTYPE html>
<html>
<head>
    <title>Maybe a game maybe</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h2>Please enter your name.</h2>
    <form name="userInput">
        <input type="text" name="textInput"/>
    </form>
    <button id="confirm">Confirm</button>
    <br/>
    <div class="textOutput"></div>
</body>
</html>

这是我的CSS

h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}

这是我的jQuery

$(document).ready(function(){
    $('#confirm').click(function() {
        var playerName = $('input[name=textInput]').val();
        $(".textOutput").append("<p>" + playerName + "</p>");
    });
});

这个想法是输入到textInput框的文本存储在变量playerName中。然后，当单击确认按钮时，包含playerName的<p>将附加到.textOutput <div>。我正在使用Codecademy教程来帮助我确认这一点。代码几乎与教程中的代码完全相同。唯一的区别是某些项目的名称，以及确认按钮是按钮而不是div的事实。代码在本教程中完美地运行，但是当我在普通编辑器中尝试它时，它根本不起作用。我甚至尝试将教程中的确切代码复制并粘贴到我的编辑器中，但仍然无效。我正在使用的编辑器是Sublime Text 2.我找不到我在这里缺少的东西。非常感谢你提前。

Answer 1

请替换

  <script type="text/javascript" src="script.js"></script>

与

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

然后尝试编码：

 $(document).ready(function(){
    $('#confirm').click(function() {
       var playerName = $('input[name=textInput]').val();
       $(".textOutput").append("<p>" + playerName + "</p>");
    });
   });

Answer 2

我认为你将它保存为文本文件。

您必须将文件另存为.html或.htm并将脚本包装在<script>标记中并将css包装在<style>标记中，然后在浏览器中将其打开

Answer 3

你需要包含jquery-library：举个例子。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

在head-tag内。

Answer 4

head标签中没有任何jQuery库。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

您的代码有效，如此处所示。 http://jsfiddle.net/haxtbh/2gMgQ/

jQuery单击按钮时，将输入中的文本附加到div中

4 个答案: