On my calculator, I wanted to throw in a little easter egg to alert a response when the user entered certain calculator spelling sequences. (My pen: http://codepen.io/AbdiViklas/pen/GjdrZQ?editors=0010) On lines 77-91 I set up a function to run certain alert strings (nevermind the “toast” business; I’ll get to that in a second), and then in the next function, my main “click a number” function, I first update the contents of #display (line 97 or 102), then, after a couple other commands, run checkSpelling(). What happens in practice is, when entering one of the numbers in question, as I hit the last digit, first the alert fires, and the #display element has not yet updated to show the final digit; after I dismiss the dialog it updates.
Now I can get around this by using Materialize’s “toast” alerts, which are nice and less intrusive than browser alerts anyway. But now I’m curious! With the element being updated way back there in 97 or 102, how come line 106 and its results are happening before the DOM gets updated?