My switch statement prints default everytime - It's a simple rock,paper,scissors game

Question

This is my code - can anyone see, what I am executing wrong. If i use the 'win();' within function 'main' then the score updates, same with 'lose();' I am a beginner, only 3 months of practice so I can't see where I am going wrong. Can someone point the way. I have enclosed HTML, CSS and Javascript so you can see what each function should be doing.

let playerScore = 0;
let computerScore = 0;
let playerScore_span = document.getElementById("user-score");
let computerScore_span = document.getElementById("computer-score");
const scoreplace_div = document.querySelector(".score-place");
const rock_div = document.getElementById("ro");
const paper_div = document.getElementById("pa");
const scissors_div = document.getElementById("sc");

function win(player, computer) {
  playerScore++;
  playerScore_span.innerHTML = playerScore;
  computerScore_span.innerHTML = computerScore;
}

function lose(computer, player) {
  computerScore++;
  computerScore_span.innerHTML = computerScore;
  playerScore_span.innerHTML = playerScore;
}

function draw() {
  console.log("draw");
}
let playerSelection;
let computerSelection;

function compChoice() {
  let computerMove;
  const words = ["ro", "pa", "sc"];
  computerMove = words[Math.floor(Math.random() * 3)];
  return computerMove;
}

function game(playerSelection, computerSelection) {
  let computerMove = compChoice();
  switch (playerSelection + computerSelection) {
    case "paro":
    case "rosc":
    case "scpa":
      win();
      break;
    case "ropa":
    case "pasc":
    case "scro":
      lose();
      break;
    case "roro":
    case "papa":
    case "scsc":
      draw();
      break;
    default:
      console.log("it's fudged mate");
  }
}

function main() {
  rock_div.addEventListener('click', function(playerSelection, computerSelection) {
    game("ro");
  })

  paper_div.addEventListener('click', function(playerSelection, computerSelection) {
    game("pa");
  })

  scissors_div.addEventListener('click', function(playerSelection, computerSelection) {
    game("sc");
  })
}

main();
compChoice();
game(playerSelection, computerSelection);
win(playerScore, computerScore);
lose(computerScore, playerScore);

body {
  align-items: center;
  background: black;
}

.container {
  color: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container-2 {
  color: red;
  display: flex;
  justify-content: center;
}

span {
  color: white;
  display: flex;
  justify-content: center;
}

.game-hands {
  display: flex;
  justify-content: space-around;
}

img {
  width: 200px;
  border: solid;
  border-color: black;
  border-radius: 100px;
}

h1 {
  display: flex;
  justify-content: center;
  color: white;
  border: solid;
  border-color: black;
  border-radius: 70px;
  p {
    border: solid;
    border-color: black;
  }
  .option-hover {
    cursor: pointer;
    background: white;
  }

Rock-Paper-Scissors






  Rock, Paper, Scissors!





  User

  Computer
  0:0




  

    Let's Play!

user_12709613 · Answer

As far as your problem is concerned

You used the parameter computerSelection that was not passed into the method, it will output the default string, which is normal, because there is no string that meets the conditions

According to the original conditions, the actual conditions will only have the following strings:

roundefined
paundefined
scundefined

But I see that your method has a computerMove parameter, Combine my estimated logic and the internal logic of the program, the program should be adjusted as follows:

Replace switch (playerSelection + computerSelection) with switch (playerSelection + computerMove )

My switch statement prints default everytime - It's a simple rock,paper,scissors game

1 Answers