JavaScript - Why do I have to click the button twice to fire a function?

I have a button that when clicked checks if the next number will be higher or lower. If the user guessed correctly he/she gets points. But I do not know why I have to click twice this button for the function to start. The problem is that is counts incorrectly remaining rounds. It also sets next img path, fills in guesses history, creates an object to store data in locaStorage that will be then retrieved.

// check if the guess was correct
    function checkGuess(){ 
       
         if(remainingRounds == 0) {
            console.log("You ran out of rounds. Game over");
            remainingRounds = 0;
           rounds.textContent = remainingRounds;
           lowerButton.disabled = true;
           higherButton.disabled = true;
           saveGameResults();
           gameOverModal.style.visibility = "visible";
             gameOverModal.style.display = "flex";
             document.getElementById('final-score').textContent = sumOfPoints;
        }
        else if(remainingRounds>= 1 || remainingRounds <= 30){
            if(lowerButtonClicked && arr[i]>arr[i+1]){
                console.log("FUNCTION RESULT button LOWER clicked and YOU GUESSED");
                sumOfPoints += 0.1;
                pointsGained.textContent = sumOfPoints;
                rounds.textContent = remainingRounds;
                console.log("remaing rounds" + remainingRounds);
                singleRound.id = currentRound;
                singleRound.score = sumOfPoints;
                singleRound.remaining = remainingRounds;
                singleRound.src = imgCorrect;
                console.log("single round" +singleRound.score);
                historyOfScores = [...historyOfScores,singleRound];
                console.log("history of scores " + historyOfScores.length);
                fillGuessHistory(guessesHistory, imgCorrect, currentRound);
                i++;
                remainingRounds--;
                currentRound++;
                /* build new img src url */
                imgNewUrl = imgStr+ arr[i] +'.png';
                /*set new src url to the img */
                document.getElementById("img-dice").src = imgNewUrl; 
                saveGameResults();             
            }
            else if(lowerButtonClicked && arr[i] < arr[i+1]){
                console.log("FUNCTION RESULT button LOWER was clicked and YOU FAILED");
                sumOfPoints = sumOfPoints;
                pointsGained.textContent = sumOfPoints;
                rounds.textContent = remainingRounds;
                console.log("remaing rounds" + remainingRounds);
                singleRound.id = currentRound;
                singleRound.score = sumOfPoints;
                singleRound.remaining = remainingRounds;
                singleRound.src = imgIncorrect;
                console.log("single round" +singleRound.score);
                historyOfScores = [...historyOfScores,singleRound];
                console.log("history of scores " + historyOfScores.length);
                fillGuessHistory(guessesHistory, imgIncorrect,currentRound);
                i++;
                currentRound++;
                remainingRounds--;
                /* build new img src url */
                imgNewUrl = imgStr+ arr[i] +'.png';
                /*set new src url to the img */
                document.getElementById("img-dice").src = imgNewUrl;
                saveGameResults();
            }
            else if(higherButtonClicked && arr[i] < arr[i+1]){
                console.log(" FUNCTION RESULT button HIGHER clicked AND YOU GUESSED");
                sumOfPoints += 0.1;
                pointsGained.textContent = sumOfPoints;
                rounds.textContent = remainingRounds;
                console.log("remaing rounds" + remainingRounds);
                singleRound.id = currentRound;
                singleRound.score = sumOfPoints;
                singleRound.remaining = remainingRounds;
                singleRound.src = imgCorrect;
                console.log("single round" +singleRound.score);
                historyOfScores = [...historyOfScores,singleRound];
                console.log("history of scores " + historyOfScores.length);
                fillGuessHistory(guessesHistory, imgCorrect,currentRound);
                i++;
                currentRound++;
                remainingRounds--;
                /* build new img src url */
                imgNewUrl = imgStr+ arr[i] +'.png';
                /*set new src url to the img */
                document.getElementById("img-dice").src = imgNewUrl;
                saveGameResults();
            }
            else if(higherButtonClicked && arr[i] > arr[i+1]){
                console.log(" FUNCTION RESULT button HIGHER clicked AND YOU FAILED");
                sumOfPoints = sumOfPoints;
                pointsGained.textContent = sumOfPoints;
                rounds.textContent = remainingRounds;
                console.log("remaing rounds" + remainingRounds);
                singleRound.id = currentRound;
                singleRound.score = sumOfPoints;
                singleRound.remaining = remainingRounds;
                singleRound.src = imgIncorrect;
                console.log("single round" +singleRound.score);
                historyOfScores = [...historyOfScores,singleRound];
                console.log("history of scores " + historyOfScores.length);
                fillGuessHistory(guessesHistory, imgIncorrect, currentRound);
                i++;
                currentRound++;
                remainingRounds--;
                /* build new img src url */
                imgNewUrl = imgStr+ arr[i] +'.png';
                /*set new src url to the img */
                document.getElementById("img-dice").src = imgNewUrl;
                saveGameResults();
            }
            else if ((higherButtonClicked && arr[i] == arr[i+1]) || (lowerButtonClicked && arr[i] == arr[i+1])){
                console.log('the numbers are qual');
                sumOfPoints = sumOfPoints;
                pointsGained.textContent = sumOfPoints;
                rounds.textContent = remainingRounds;
                console.log("remaing rounds" + remainingRounds);
                singleRound.id = currentRound;
                singleRound.score = sumOfPoints;
                singleRound.remaining = remainingRounds;
                singleRound.src = imgEqual;
                console.log("single round" +singleRound.score);
                historyOfScores = [...historyOfScores,singleRound];
                console.log("history of scores " + historyOfScores.length);
                fillGuessHistory(guessesHistory, imgEqual,currentRound);
                i++;
                currentRound++;
                remainingRounds--;
                /* build new img src url */
                imgNewUrl = imgStr+ arr[i] +'.png';
                /*set new src url to the img */
                document.getElementById("img-dice").src = imgNewUrl;
                saveGameResults();
            }
        } 
    }

Also, here I have two methosds defined to check which button was clicked. Maybe here is the problem.

// check which button "higher" or "lower was clicked"
    document.getElementById('lower').addEventListener('click', function () { 
        //console.log("button lower was clicked ");
        lowerButtonClicked = true;
    });
    document.getElementById('higher').addEventListener('click', function () { 
        //console.log("button higher was clicked "); 
        higherButtonClicked = true;
    });

you have not showed how checkGuess() is called

<!-- buttons to guess -->
            <div class="row d-flex justify-content-center">
                    <button id="lower" type="button" data-toggle="modal" data-target="#game-over-modal" class="btn btn-warning btn-lg button-style" onclick=checkGuess()>Lower</button>
                    <button id="higher" type="button" data-toggle="modal" data-target="#" class="btn btn-success btn-lg button-style" onclick=checkGuess()>Higher</button>
            </div>

it’s probably because the two things happen at the same time, so the check that you do is done before the variable has changed to true

you can give this as argument to the onclick=checkGuess(this) part, it will pass the element to the function, you can then check some property of the button to see which one is being clicked