gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:34:31 25 4
gpt4 key购买 nike

很有可能这是一个重复的问题,但我找不到似乎可以解决我的问题的答案。我正在尝试制作一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com