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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

Reference:

• id must be unique
• textContent
• trim

An easier answer than this one I posted here :

https://stackoverflow.com/questions/75624474/how-to-make-the-computer-pick-another-random-selection-after-the-player-chooses/75626686#75626686

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

		let options = ["rock", "paper", "scissors"];
let playerChoice = null;
let computerChoice = null;
let rock = null;
let paper = null;
let scissors = null;
let results = null;
let choices = null;
let score = null;
let playerScore = 0;
let computerScore = 0;
document.addEventListener("DOMContentLoaded",addListeners);
function addListeners(){
rock = document.getElementById("rock");
paper = document.getElementById("paper");
scissors = document.getElementById("scissors");
choices = document.getElementById("choicesDiv");
results = document.getElementById("displayResults");
score = document.getElementById("scoreDsp");
rock.addEventListener("click",() => {play(0);});
paper.addEventListener("click",() => {play(1);});
scissors.addEventListener("click",() => {play(2);});
}
function play(element){
playerChoice = options[element];
computerChoice = computerPlay();
choices.innerHTML = ("player = " + playerChoice + " computer = " + computerChoice);
computeScore();
}
function computerPlay(){
var rnd = Math.floor(Math.random()*options.length);
var result = options[rnd];
return result;
}
function computeScore(){
if (playerChoice == computerChoice) {
results.innerHTML = "Its a tie";
}else if(
(playerChoice == "rock" && computerChoice == "scissors") ||
(playerChoice == "paper" && computerChoice == "rock") ||
(playerChoice == "scissors" && computerChoice == "paper")
){
results.innerHTML = playerChoice + " beats " + computerChoice + ". YOU WIN!";
playerScore+=1;
}else{
results.innerHTML = computerChoice + " beats " + playerChoice + ". COMPUTER WIN!";
computerScore+=1;
}
score.innerHTML = "player score = " + playerScore + ", computer score = " + computerScore;
}

<!-- language: lang-html -->

	<div id="choiceContainer">
<button id="rock" class="btn"> Rock </button>
<button id="paper" class="btn"> Paper </button>
<button id="scissors" class="btn"> Scissors </button>
</div>
<div id="choicesDiv"></div>
<div id="displayResults"></div>
<div id="scoreDsp"></div>

<!-- end snippet -->