Question 43263 in Html Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    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:

    Login or Signup to reply.
  2. 0

    An easier answer than this one I posted here :

    How to make the computer pick another random Selection after the player chooses their choice?

            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;
        }
        <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search