Use JS var value only after a button click
<p>I want to show which menu value was selected using JavaScript, like this:</p>

<pre><code>&lt;script&gt; 
document.writeln(value);
&lt;/script&gt;
</code></pre>

<p>Where the JS variable called <code>value</code> gets defined by jQuery when a button is clicked:</p>

<pre><code>$('#submit').click(function(){
    var value = $('#model').val();   

});
</code></pre>

<p>The problem being that the code tries to render <code>value</code> before it has been created by the button. </p>

<p>I know I can show/hide a <code>div</code> based on the button click, but even if the section with <code>writeln</code> is hidden it still has the same problem. I also need to be able to change my selection, click submit, and have the value update properly.</p>

<p>Here's a jsFiddle illustrating the problem:</p>

<p><a href="https://jsfiddle.net/f3n7uq14/4/" rel="nofollow">https://jsfiddle.net/f3n7uq14/4/</a></p>