Taras Yaremkiv Taras Yaremkiv - 1 month ago 11
CSS Question

fa-spin stops after start and the page is reloaded

I add the button refresh on the page, so it resets the tic tac toe game.
But instead of rotating it starts to rotate and stops immediately.

As far as I get it, refresh1.classList.add("fa-spin"); add the class to an element and after that the page reloads.
A link to the whole page is here

https://codepen.io/Y-Taras/pen/rrkKWz

An abstract of code concerned with this question:

var reset = document.getElementsByClassName('hard-reset')[0];
reset.addEventListener('click', resetAll);
...
function hideFooter() {
for (i = 0; i < tableElem.length; i++) {
tableElem[i].innerHTML = "";
tableElem[i].className = "";
}
footer.className = "hide";
}

function resetAll() {

board = ['e', 'e', 'e', 'e', 'e', 'e', 'e', 'e', 'e'];
hideFooter();
var refresh1 = document.getElementById("refresh");
refresh1.classList.add("fa-spin");}


HTML part:

<button class="hard-reset">
<i id="refresh" class="fa fa-refresh fa-2x"></i>
</button>

Answer

The default type of a button in a form is "submit" (Not in all browsers though!) Just add type="button" to your button and you should be good to go!

http://stackoverflow.com/a/3315016/1497533