Build a Rock Paper Scissors Game - Build a Rock Paper Scissors Game

The Odin Project
1

Tell us what’s happening:

step 8,9,10,11, are not passing the test though they work as expected.
Could anyone tell me what I am missing?
if(hadPlayerWonTheRound(humanChoice, computerChoice)){
humanScore++;
return You win! ${humanChoice} beats ${computerChoice}
}else {
if(humanChoice === computerChoice){
return “It’s a tie!”
}
else {
computerScore++;
return You lose! ${computerChoice} beats ${humanChoice}
}
}
}

Your code so far

/* file: script.js */
const resultText = document.querySelector('#result')

const finalResultText = document.querySelector("#final-result")
let inputValue = document.querySelector('#input-text') 
const resultBtn = document.querySelector("#get-result")
const hand = ['rock', 'paper', 'scissors'];
const resetBtn = document.querySelector('#reset')
 resetBtn.style.display = 'none'
 const humanScoreSpan = document.querySelector('.human-score-span')
 const computerScoreSpan = document.querySelector('.computer-score-span')
 const resultSpan = document.querySelector('.result-span')
 const finalResultSpan = document.querySelector('.final-result-span')
 

//1 get getComputerChoice return 
// any of the array 
 let clickTracker = 0;
let humanScore = 0;
let computerScore = 0

function getComputerChoice(){
  let randomNum =  Math.floor(Math.random()* hand.length);
  return hand[randomNum]

}
function getHumanChoice(){
//  let value = prompt('inter a value')
  //value = value.toLowerCase()
 // return value

  let inputResult = inputValue.value
return inputResult
}



function hadPlayerWonTheRound(player, computer) {
  return (
    (player === "rock" && computer === "scissors") ||
    (player === "scissors" && computer === "paper") ||
    (player === "paper" && computer === "rock")
  );
}



function playRound(humanChoice,computerChoice){

   humanChoice = getHumanChoice().toLowerCase()
 computerChoice = getComputerChoice()
  console.log(humanChoice, computerChoice)
 console.log(hadPlayerWonTheRound(humanChoice, computerChoice))

if(hadPlayerWonTheRound(humanChoice, computerChoice)){
   humanScore++;
  return `You win! ${humanChoice} beats ${computerChoice}`
}else {
  if(humanChoice === computerChoice){
  return "It's a tie!"
}
else {
  computerScore++;
  return `You lose! ${computerChoice} beats ${humanChoice}`
}
}
}
function playGame(){
  // for(let i = 0; i< 3; i++){
  //  let finalResult=  playRound(humanScore,computerScore)
  //  console.log('result:;;',finalResult)
  //     //result.textContent = result
   
  //     //return finalResult
  // }
  //  //return finalResult

    let finalResult = humanScore === computerScore? "It's a tie!, None of you won the game":
    humanScore> computerScore? "You win the game!": "You lose the game!"

    
    return finalResult;
   
}
 resultBtn.addEventListener('click', ()=>{
  clickTracker++;
 let result =   playRound(getHumanChoice(), getComputerChoice())
   inputValue.value = ''
   humanScoreSpan.textContent =`${humanScore}`
   computerScoreSpan.textContent = `${computerScore}`
   resultSpan.textContent = result
   
 if(clickTracker === 3){
    
    //resultBtn.disabled = true
    resultBtn.style.display = 'none';
    resetBtn.style.display = 'block'
    resultText.textContent =''
  return  finalResultSpan.innerText = `${playGame()}`
  }
  
   })

   function resetGame(){
     humanScore = 0;
     computerScore = 0;
     resultText.innerText = 'Your result: '
     finalResultText.innerText = 'Your final result: '
     clickTracker = 0;
     humanScoreSpan.textContent = 0;
     computerScoreSpan.textContent = 0;
     resetBtn.style.display ='none'
     resultBtn.style.display = 'block'
   }
  
  
 

<!-- file: index.html -->
<html lang="en">
<head>
 
</head>
<body>
  <div id='title'> Rock-Paper-Scissors Game</div>
  <div class='input-field'>
  <input type='text', placeholder='Enter your choice' id='input-text'/>
  <button id='get-result'> Click</button>

 <button id='reset'  onClick ="resetGame()">Reset</button>
</div>
<div class='human-score'> Human score: <span class='human-score-span'>0</span><div>
  <div class='computer-score'>Computer score: <span class='computer-score-span'>0</span> </div>
  <div id='result'>Your Result: <span class='result-span'></span> </div>
  <div id='final-result'>Final Result: <span class='final-result-span'></span></div>

   <script src="script.js"></script>
  
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Challenge Information:

Build a Rock Paper Scissors Game - Build a Rock Paper Scissors Game

2

question, why are you overwriting the parameters?

3

Hi ILM, thank you for catching my attention on those two params. that was the reason.

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.