I'm just learning about html, css, and javascript through codeacademy. I wanted to try and practice what I learned by creating a website without the codeacademy environment. The problem I'm having is linking my javascript to my html. I have three files in a folder: index.html, style.css, and script.js. I'm setting it up just as I learned, the website is loading fine, but the javascript never works for some reason. Any reason why? Here's my html and js:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<form>
MESSAGE: <input type="text" name="message" value="Type your text here!">
</form>
<button>Add!</button><br/>
<div id="messages"></div>
</body>
script.js:
$(document).ready(function () {
$('button').click(function () {
var toAdd = $("input[name=message]").val();
$('#messages').append("<p>" + toAdd + "</p>");
});
});