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.
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:
<input class="box" type="button" value"" />
<ul>
<li>How much do pirates pay to get their ear pierced? </br> A buck anear!</li>
<li>How do pirates talk to one another? </br> Aye to aye!</li>
<li>What did the sea say to the pirate captain? </br> Nothing, it justwaved!</li>
<li>What is a pirates favourite shop? </br> Ar-gos!</li>
<li>When is it the best time for a pirate to buy a ship? </br> Whenit is on sail!</li>
</ul>
The script is:
$(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);
});
});
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.
Fiddle: http://jsfiddle.net/uRd6N/98/