code in a code block were not executed in order

Question

please help the newbie that just started the js, I have a function in the game that checks for a false condition and then restarts the game. For some reason, the restart() function was always called before the other two lines, that query the HTML and shows the game result.

function checkResult(id) {
    if (!combo.includes(id)){
        document.querySelector('body').classList.add('game-over');
        document.getElementById("title").innerHTML = "You lost, Press start button to restart";
        restart();
    }
function restart() {
    alert("game started")

Answer 1

It's likely that restart is not being called first. You can verify this using the chrome debugging tools or using console.log to print out the order of operations.

What's going on is that your DOM changes are not visually represented by the browser until the next repaint. Repainting happens in between synchronous blocks of code. restart is synchronous, so you see the alert before you see the DOM changes.

If you want to wait for the browser to repaint, I believe you can make use of the requestAnimationFrame API (see this SO answer).

This is all assuming that your code missing brackets and such is just a copy-paste error. Do ensure your syntax is correct.