title: Store value from cookie to JavaScript variable
body: <p>I'm just getting started with JavaScript &amp; jQuery and am figuring things out as I go, so apologies if this is a basic question. I have some simple code written to:</p>
  
  <ul>
  <li>Capture a value from a form</li>
  <li>Store it to a cookie</li>
  <li>Recall the value from the cookie and store it in a JS variable</li>
  <li>Print the JS variable</li>
  </ul>
  
  <p>...but I can't get it to work. I can see that the cookie is being set properly, but for some reason, I can't retrieve it and write it to the variable. Here is my code, any help would be much appreciated!</p>
  
  <pre><code>&lt;!-- CAPTURE A VALUE IN A SIMPLE FORM... --&gt;
    &lt;input id="txt" type="text" value="foo" /&gt;
    &lt;input id="btn" type="button" value="1 - write cookie" /&gt;
    &lt;input id="btntwo" type="button" value="2 - set cookie to variable" /&gt;
    &lt;input id="btnthree" type="button" value="3 - print the cookie" /&gt;
  
  &lt;!-- WRITE THE VALUE TO THE COOKIE WHEN A USER CLICKS THE BTN... --&gt;
    &lt;script type="text/javascript"&gt;                                         
     $(document).ready(function () {
      $("#btn").on("click", function () {
        $.cookie('myCookie', $("#txt").val(), { expires: 365 });
        });
      });                              
    &lt;/script&gt; 
  
  &lt;!-- SET THE COOKIE VALUE TO A VARIABLE WHEN A USER CLICKS THE BTNTWO... --&gt;
  &lt;script type="text/javascript"&gt;   
  $(document).ready(function() {
    $("#btntwo").on("click", function () {
      var cookVal = $.cookie('myCookie')
    });
  });
  &lt;/script&gt;     
  
  &lt;!-- PRINT THE COOKIE VALUE ON THE SCREEN WHEN A USER CLICKS THE BTNTHREE... --&gt;
  &lt;script type="text/javascript"&gt;   
  $(document).ready(function() {
    $("#btnthree").on("click", function () {
      document.write(cookVal);     
    });
  });
  &lt;/script&gt;     
  </code></pre>