My input always returns 0 when using the .target.innerHTML

I am currently creating a UI for my Rock, Paper, Scissors game program in JavaScript. While changing pieces of my code, I found out that my variable playerChoice's value will always end up as 0 when running the function playRound(playerChoice, getComputerChoice()). However, when inputting similar plain strings such as ROCK, PAPER, or SCISSORS, the code/game runs fine.

I tried following the path where it's being passed unto so I used console.log:

Under Line 51 as console.log(typeof playerChoice) it's string
Under Line 26 as console.log(typeof playerChecker) it's string

So far so good because it remains as the same data type. Now It's entering my function inputConverter() because of the variable let playerChoice. But when I use console.log:

Under Line 29 as console.log(playerChoice), it WILL ALWAYS end up as 0. But the variable chosen by the computer doesn't. Why is this?

I've tried using debugging tools and all, but in the end it doesn't show up because it's a logical error. I thought it would be because I used e.target.innerHTML, but I'm unsure if that's truly the case.

function getComputerChoice() {
  // 2 is for Scissors, 1 is for Rock, 0 is for Paper
  const compChoice = Math.floor(Math.random() * 3);
  if (compChoice === 2) {
    return "Scissors";
  } else if (compChoice === 1) {
    return "Rock";
  } else
    return "Paper";
}

function inputConverter(gamerInput) {
  if (gamerInput === "ROCK") {
    return 2;
  } else if (gamerInput === "PAPER") {
    return 1;
  } else
    return 0;
}

function playRound(playerSelection, computerSelection) {
  let playerChecker = playerSelection.toUpperCase();
  let computerChecker = computerSelection.toUpperCase();

  let playerChoice = inputConverter(playerChecker);
  let computerChoice = inputConverter(computerChecker);

  if (playerChoice === computerChoice) {
    return "Draw! " + playerChecker + " is the same as " + computerChecker;
  } else if (playerChoice === 2 && computerChoice === 0 ||
    playerChoice === 1 && computerChoice === 2 ||
    playerChoice === 0 && computerChoice === 1) {
    return "You Win! " + playerChecker + " beats " + computerChecker;
  } else {
    return "You Lose! " + computerChecker + " beats " + playerChecker;
  }
}

let buttonChoices = document.querySelectorAll("button");

buttonChoices.forEach(i => {
  i.addEventListener("click", (e) => {
    let playerChoice = e.target.innerHTML;
    console.log(playRound(playerChoice, getComputerChoice()));
  })
})

<div id="choiceContainer">
  <button id="btn"> Rock </button>
  <button id="btn"> Paper </button>
  <button id="btn"> Scissors </button>
</div>

Solution

First of all id must be unique. Second you try to compare string with space with string without space, it's better use textContent with trim like:

function getComputerChoice() {
  // 2 is for Scissors, 1 is for Rock, 0 is for Paper
  const compChoice = Math.floor(Math.random() * 3);
  if (compChoice === 2) {
    return "Scissors";
  } else if (compChoice === 1) {
    return "Rock";
  } else
    return "Paper";
}

function inputConverter(gamerInput) {
  if (gamerInput === "ROCK") {
    return 2;
  } else if (gamerInput === "PAPER") {
    return 1;
  } else
    return 0;
}

function playRound(playerSelection, computerSelection) {
  let playerChecker = playerSelection.toUpperCase();
  let computerChecker = computerSelection.toUpperCase();

  let playerChoice = inputConverter(playerChecker);
  let computerChoice = inputConverter(computerChecker);

  if (playerChoice === computerChoice) {
    return "Draw! " + playerChecker + " is the same as " + computerChecker;
  } else if (playerChoice === 2 && computerChoice === 0 ||
    playerChoice === 1 && computerChoice === 2 ||
    playerChoice === 0 && computerChoice === 1) {
    return "You Win! " + playerChecker + " beats " + computerChecker;
  } else {
    return "You Lose! " + computerChecker + " beats " + playerChecker;
  }
}

let buttonChoices = document.querySelectorAll("button");

buttonChoices.forEach(i => {
  i.addEventListener("click", (e) => {
    let playerChoice = e.target.textContent.trim();    
    console.log(playRound(playerChoice, getComputerChoice()));
  })
})

<div id="choiceContainer">
  <button class="btn"> Rock </button>
  <button class="btn"> Paper </button>
  <button class="btn"> Scissors </button>
</div>

Reference: