JS function using jQuery bugging with Foundation 5

Question

I am generating a random number by clicking on a button and after generating this number enter as the value of a input. However, when clicking the button everything follows normally the value is generated, so much so that I use the function alert() to check if the number is actually being generated. The script generates the number I can put in the input I want, but after the value of this input be changed the page gives a Reload. I cannot identify the responsible for this Reload. I am using jQuery and the Foudation 5 framework.

Follow in the Fiddle: http://jsfiddle.net/r4dL5s0f/1/

The button I click to do this task is this below Carta Aleatória:

To confirm the operation of the script I jotted the value inside the button. But even so the page gives a single Reload. Button with the value:

Answer 1

I think the problem is that your button is an anchor:

<a href="" class="button tiny carta_aleatoria">Carta Aleatória</a>

need to do preventDefault()

$(".carta_aleatoria").click(function (e){
    e.preventDefault();

http://jsfiddle.net/r4dL5s0f/2/

By the way, you might want to have this random number generator inside the function?

$(".carta_aleatoria").click(function (e) {
    e.preventDefault();
    var numero = Math.floor((Math.random() * 895) + 1);
    alert(numero);
    $(this).empty().text(numero);
});