jQuery Добавление текста из ввода в div при нажатии кнопки

0

Там хороший шанс, который может быть повторным вопросом, но я не мог найти ответ, который, казалось, разрешил мою проблему. Я пытаюсь сделать бит 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. Я не могу найти то, что мне здесь не хватает. Заранее большое спасибо.

  • 0
    Вы используете JQuery, я не вижу, как вы загружаете библиотеку JQuery в ваш HTML

4 ответа

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>");
    });
   });
0

вам нужно включить jquery-library: put eg

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

внутри заголовка.

0

У вас нет библиотек jQuery в теге head.

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

Ваш код работает, как показано здесь. http://jsfiddle.net/haxtbh/2gMgQ/

0

Я предполагаю, что вы сохраняете его как текстовый файл.

Вы должны сохранить файл как .html или .htm и обернуть скрипт в <script> и обернуть css в <style> а затем открыть его в браузере.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню