Change value of a button when clicked
<p>I have a list of jokes that I want to display in a box. When the page is loaded I want to display one at random in the box. Then when I click the box I want it to change the value again to another random one from the list.</p>

<p>At the moment I just cannot get it to work and can't work out where I am going wrong. I have the HTML as follows:</p>

<pre><code>&lt;input class="box" type="button" value"" /&gt;
&lt;ul&gt;
    &lt;li&gt;How much do pirates pay to get their ear pierced? &amp;lt;/br&amp;gt; A buck anear!&lt;/li&gt;
    &lt;li&gt;How do pirates talk to one another? &amp;lt;/br&amp;gt; Aye to aye!&lt;/li&gt;
    &lt;li&gt;What did the sea say to the pirate captain? &amp;lt;/br&amp;gt; Nothing, it justwaved!&lt;/li&gt;
    &lt;li&gt;What is a pirates favourite shop? &amp;lt;/br&amp;gt; Ar-gos!&lt;/li&gt;
    &lt;li&gt;When is it the best time for a pirate to buy a ship? &amp;lt;/br&amp;gt; Whenit is on sail!&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The script is:</p>

<pre><code>    $(document).ready(function () {

    var list = $("ul li").toArray();
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list[randomnum];

    $('.box').click(function () {
        $(this).val(randomitem);
    });
});
</code></pre>

<p>Can someone please show me how to make the button have a value when the page is loaded and then change the value when the button is clicked.</p>

<p>Fiddle: <a href="http://jsfiddle.net/uRd6N/98/" rel="nofollow">http://jsfiddle.net/uRd6N/98/</a></p>
