Store value from cookie to JavaScript variable
<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>
