Issue with negative scores in a simple JS game

I’ve created a simple JS game where it asks the player to add two random numbers together, and gives them three options to select — one of the answers is correct and the other two are incorrect. The player only gets 10 seconds to answer each question. When the player selects the correct answer their score is incremented by +1, and it all works as expected.

…Until I tried to add a feature to -1 their score when they get a question wrong (by selecting either of the 2x wrong answers). Everything works as expected when the numbers are positive, however if they get into negatives then weird things start happening and I have no idea why: The score decrements by more than 1, and even when the player gets an answer correct the score still decrements.

As a workaround I tried to add a condition where if the score is below 0 it would reset to 0, so it can’t go negative — however if I do that the score will not increment past 1, no matter how many answers the players get right.

The game and code is here: https://codepen.io/tmnsoon/full/XWVWvmb

let score = 0
function startCountdown(seconds) {
  

  let counter = seconds;
    
  const interval = setInterval(() => {
    document.getElementById("timer").innerHTML = counter;
    counter--;
      
    if (counter < 0 ) {
      clearInterval(interval);
      game()
      startCountdown(10)
    }
  }, 1000);
}

function game(){
 let answer1 = Math.floor(Math.random()*500)
 let answer2 = Math.floor(Math.random()*500)
 document.getElementById("challenge").innerHTML = `What is ${answer1}  plus ${answer2}`
     console.log('Ding!');
     let number1 = Math.floor(Math.random()*1000)
     let number2 = answer1+answer2
     let number3 = Math.floor(Math.random()*1000)
     let gameNums = [number1, number2,number3]
     shuffle(gameNums)
     console.log(gameNums)
    document.getElementById("button1").innerHTML = gameNums[0]
  document.getElementById("button2").innerHTML = gameNums[1]
  document.getElementById("button3").innerHTML = gameNums[2]
  
  
  function handleClick(event) {

  if (event.target.tagName !== "BUTTON") {
    return;
  }

  let buttonValue = event.target.innerText;
  
    if (buttonValue == answer1+answer2){
      document
    .querySelector("#result")
    .innerText = "Correct!";
      score++
      document.getElementById("score").innerHTML = `Score = ${score}`
      game()

      

    }
    else if (buttonValue == number1 || number3){
  document
    .querySelector("#result")
    .innerText = "Incorrect!";
     score--
     
      document.getElementById("score").innerHTML = `Score = ${score}`

      }
}

//listner
document
  .querySelector(".buttons")
  .addEventListener("click", handleClick);

  
  
  
  
  
  
  
  
  //end

}

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

If anyone could shed light on what I’ve done wrong it would be greatly appreciated. Thanks!

>Solution :

The problem is in your else if condition for decreasing the score: else if (buttonValue == number1 || number3).

You’re telling the compiler that it should enter that block if the previous if condition is not true AND (if the buttonValue == number1 OR if number3 is truthy).

You probably wanted to write else if (buttonValue == number1 || buttonValue == number3).

Some additional advice: you don’t need the condition in the else statement at all, it’s enough that the buttonValue isn’t the correct answer, there’s no need to check which incorrect answer it is.

You can just have else {.