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;
});
