很有可能这是一个重复的问题，但我找不到似乎可以解决我的问题的答案。我正在尝试制作一个 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 中。然后一个<p>包含 playerName 的附加到 .textOutput <div>单击确认按钮时。我正在使用 Codecademy 教程来帮助我确认这一点。该代码几乎与教程中的代码完全一样。唯一的区别是某些元素的名称，以及确认按钮是按钮而不是 div。该代码在教程中运行良好，但当我在普通编辑器中尝试时，它根本不起作用。我什至尝试将教程中的确切代码复制并粘贴到我的编辑器中，但仍然不起作用。我使用的编辑器是 Sublime Text 2。我在这里找不到我缺少的东西。非常感谢您。
最佳答案
请替换
<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>");
});
});
关于javascript - jQuery 单击按钮时将输入中的文本附加到 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23135481/