JS function using jQuery bugging with Foundation 5

1

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

Follow the Fiddle: link

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

Inordertoconfirmtheoperationofthescript,Icheckedthevalueinsidethebutton.Butevensothepagegivesareloadbyitself.Buttonwiththevalue:

    
asked by anonymous 21.10.2014 / 20:40

1 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();

link

By now, 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);
});
    
21.10.2014 / 20:43