'Rock Paper Scissors game loop

I'm working on a task to build a Stone,Paper,Scissors Game. The game is supposed to run in 3 possible modes. best of 3 / best of 5 and endless games.

My code works fine until the point where I reset the game to begin a new game. For a reason which I can not figure out, it plays multiple instances of my game, each time I call the game() function. (after the game is over - a reset game button appears and the game mode needs to be reseleted)

I've added the entire project to this https://jsfiddle.net/vydkg3bz/, since I don't manage to pinpoint where the issue is.

I believe, due to all the extra logging I added, that the problem is somewhere in the game() function, as I tried to replace most of the code around it, with the same result.

Maybe someone has a moment to review my code and give me a hint where I should look?

// global variables
var choicesObj = {
  Rock: "url('./img/stone.png')",
  Paper: "url('./img/paper.png')",
  Scissors: "url('./img/scissors.png')",
}
var choices = Object.keys(choicesObj);
var moveAI;
var movePlayer;
var winnerRound;
var winnerGame;
var roundCount = 0; 

// actual game
function game(requiredWins) {
  console.log("game");
  enabler()

  var inputs = document.querySelectorAll(".inputButton");
  console.log(inputs);
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("click", function() {
    movePlayer = this.id
    handleClick(movePlayer)
    });    
  }

  // checking choice, display choice IMG, call compareChoices function 
  function handleClick(buttonID) {
    console.log("handleClick");
    moveAIfunc()
    movePlayer = buttonID;
    console.log('movePlayer: ' + movePlayer);
    console.log('moveAI: ' + moveAI);
    document.getElementById("mainImgPlayer").style.backgroundImage = choicesObj[movePlayer];
    document.getElementById("mainImgAI").style.backgroundImage = choicesObj[moveAI];
    compareChoices(moveAI,movePlayer);
    console.log("requiredWins", requiredWins);
    gameEnd();
    displays();
  }

  // AI control
  function moveAIfunc() {
    moveAI = choices[Math.floor(Math.random() * choices.length)]
  }

  // compare choices
  function compareChoices(a, b) {
    console.log("compareChoices");
    a = choices.indexOf(a);
    b = choices.indexOf(b);
    console.log("requiredWins", requiredWins);
    roundCount++;
    if (a == b) {
      winnerNone()
      return;
    }
    if (a == choices.length - 1 && b == 0) {
      winnerPlayer()
      return;
    }
    if (b == choices.length - 1 && a == 0) {
      winnerAI()
      return;
    }
    if (a > b) {
      winnerAI()
      return;
    }
    else {
      winnerPlayer()
      return;
    }
  }

  // game end
  function gameEnd() {
    console.log("gameEnd");
    console.log(requiredWins,winsPlayer,winsAI);
    if (winsPlayer == requiredWins) {
      console.log(requiredWins,winsPlayer,winsAI);
      winnerGame = "Player";
      disabler()
      createEndButton()
      return;
    }
    if (winsAI == requiredWins) {
      console.log(requiredWins,winsPlayer,winsAI);
      winnerGame = "AI";
      disabler()
      createEndButton()
      return;
    }
  }
}```





Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source