vendredi 25 décembre 2020

Wanting to display announcement of winner to whoever reaches 5 points first

This is my 3rd question I'm asking this week haha.. I'm a super duper newb. Anyways, I'm on the last part of this assignment and I want the page to display the game winner to whoever reaches 5 points first. I'm a bit lost on this part and I've tried adding it to the 'rock' 'paper' and 'scissors' functions but to no avail.

announcement function:

function winnerAnnouncement(playerScore, computerScore) {
          if(computerScore == 5) {
                 computerWin.textContent = 'Computer has won! Refresh the page to play again.'
            }else if(playerScore == 5) {
                 playerWin.textContent = 'You have reached 5 points, you win! Refresh the page to play again.'
               }
            else{
                 console.log()
            }
               
            playerWinner.appendChild(playerWin);
            computerWinner.appendChild(computerWin);
        }

        winnerAnnouncement(rock, paper, scissors);

Variables for winners:
    //game winner 
    const playerWinner = document.getElementById("winner");
    const computerWinner = document.getElementById("winner");

    //game winner announcement
    const playerWin = document.createElement('h2')
    const computerWin = document.createElement('h2')

    //Player + computer score for count purposes
    let playerScore = 0;

rock/paper/scissors functions:

 rock.addEventListener('click', function() {
            
            const computerChoice = computerPlay();
            
            if(computerChoice === 'paper') {
                 itemRock.textContent = 'You have chosen rock and the computer has chosen paper. ' + 'You lose, paper beats rock! Try again';
                 computerScore += 1;
                 document.getElementById("computer-score").innerText = computerScore;
            }else if(computerChoice === 'rock') {
                 itemRock.textContent = 'You have chosen rock and the computer has chosen rock. ' +  'Its a draw, try again';
            }else {
                 itemRock.textContent = 'You have chosen rock and the computer has chosen scissors. ' + 'You win! Rock beats scissors.';
                 playerScore += 1;
                 document.getElementById("player-score").innerText = playerScore;
            }
          
            results.appendChild(itemRock);
            return 'rock';  

        })

        paper.addEventListener('click', function() {

          const computerChoice = computerPlay();

            if(computerChoice === 'paper') {
                 itemPaper.textContent = 'You have chosen paper and the computer has chosen paper. ' + 'Its a draw, try again.';
            }else if(computerChoice === 'rock') {
                 itemPaper.textContent = 'You have chosen paper and the computer has chosen rock. ' +  'You win! Paper beats rock.';
                 playerScore += 1;
                 document.getElementById("player-score").innerText = playerScore;
            }else {
                 itemPaper.textContent = 'You have chosen paper and the computer has chosen scissors. ' + 'You lose. Scissors beats paper.';
                 computerScore += 1;
                 document.getElementById("computer-score").innerText = computerScore;
            }

            results.appendChild(itemPaper);
            return 'paper';

            
          
        })

        scissors.addEventListener('click', function()  {

            const computerChoice = computerPlay();

            if(computerChoice === 'paper') {
                 itemScissors.textContent = 'You have chosen scissors and the computer has chosen paper. ' + 'You win, scissors beats paper!';
                 playerScore += 1;
                 document.getElementById("player-score").innerText = playerScore;
            }else if(computerChoice === 'rock') {
                 itemScissors.textContent = 'You have chosen scissors and the computer has chosen rock. ' +  'You lose, rock beats scissors.';
                 computerScore += 1;
                 document.getElementById("computer-score").innerText = computerScore;
            }else {
                 itemScissors.textContent = 'You have chosen scissors and the computer has chosen scissors. ' + 'Its a draw, try again.'
            }

            results.appendChild(itemScissors);
            return 'scissors'



               
        })
   


Thank you for all the help guys, really appreciate it. I know im a newb so please bare with me haha. 

PS - This is an assignment on The Odin Project.

Aucun commentaire:

Enregistrer un commentaire