title: Linking javascript with html
body: <p>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:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Result&lt;/title&gt;
      &lt;link rel='stylesheet' type='text/css' href='stylesheet.css'/&gt;
      &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form&gt;
      MESSAGE: &lt;input type="text" name="message" value="Type your text here!"&gt;
      &lt;/form&gt;
      &lt;button&gt;Add!&lt;/button&gt;&lt;br/&gt;
      &lt;div id="messages"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>script.js:</p>
  
  <pre><code>$(document).ready(function () {
      $('button').click(function () {
          var toAdd = $("input[name=message]").val();
          $('#messages').append("&lt;p&gt;" + toAdd + "&lt;/p&gt;");
      });
  });
  </code></pre>