Там хороший шанс, который может быть повторным вопросом, но я не мог найти ответ, который, казалось, разрешил мою проблему. Я пытаюсь сделать бит 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>");
});
});
вам нужно включить jquery-library: put eg
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
внутри заголовка.
У вас нет библиотек jQuery в теге head.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Ваш код работает, как показано здесь. http://jsfiddle.net/haxtbh/2gMgQ/
Я предполагаю, что вы сохраняете его как текстовый файл.
Вы должны сохранить файл как .html
или .htm
и обернуть скрипт в <script>
и обернуть css в <style>
а затем открыть его в браузере.