1

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>
Taras Yaremkiv
  • 3,440
  • 7
  • 32
  • 54
  • So what is your question? The spinner starts rotating as you initiate the reload and stops rotating after the reload is done (because page context gets reset because of the reload). This is expected behavior here. – jannis Oct 23 '16 at 11:50
  • 1
    I think the poorly stated question here is: Why is it reloading? (I think it might be code pens infinite loop detection, but I haven't found the specific point so I'm not sure yet.) – ippi Oct 23 '16 at 11:53
  • 1
    Or perhaps the form is submitting? - Yeah, the form is the problem. – ippi Oct 23 '16 at 11:58
  • @ippi It's not because of codepen, on my local machine - the result is the same – Taras Yaremkiv Oct 23 '16 at 12:10

1 Answers1

1

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!

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

Community
  • 1
  • 1
ippi
  • 9,857
  • 2
  • 39
  • 50