It's possible this is a duplicate question, but none of the answers I found solved my issue. I'm attempting to create a jQuery script where text entered into a text box is appended to a div when a button is clicked. This is part of a game I'm working on, and currently, I just want to ensure the variable correctly stores and displays the input in the div. Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Potentially a Game</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>
Here is my CSS snippet:
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
Now, take a look at my jQuery code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The aim here is to store the input from the textInput field in the playerName variable. When the confirm button is clicked, a <p> element holding the playerName value is added to the .textOutput <div>. I followed a Codecademy tutorial for guidance, and the code closely mirrors what was taught. Despite this, the code works flawlessly within the tutorial platform, but not in my standard editor. I even copy-pasted the tutorial code directly into my editor with no success. My current editor is Sublime Text 2. I can't identify the error in my implementation. Any help would be greatly appreciated.