1

I declared a global scope undefined variable to store a function's return value, so that I can use slice method on the outcome to further steps of counting wins in the "getScore() function" but while my function returns the desired outcome my variable is still seen undefined in the console. Player input is taken by anchors so here is the part that takes the input:

<div class="images">
   <a href="#" id="Rock">
      <div>
         <img src="img/quartz.png" id="quartz" alt="A picture of Quartz">
         <p>Quartz
            <br>Beats Shears but weak aganist Parchment 
         </p>
      </div>
   </a>
   <a href="#" id="Scissors">
      <div>
         <img src="img/shears.png" id="shears" alt="A picture of Shears">
         <p>Shears
            <br>Beats Parchment but weak aganist Quartz 
         </p>
      </div>
   </a>
   <a href="#" id="Paper">
      <div>
         <img src="img/parchment.png" id="parchment" alt="A picture of Parchment">
         <p>Parchment
            <br>Beats Quartz but weak aganist Scissors
         </p>
      </div>
   </a>
</div>

Here is the code that is causing the issue:

"use strict";

let itemPlayer;

function choosePlayer() {

    let anchors = document.querySelectorAll("a");
    anchors.forEach((anchor) =>
        anchor.addEventListener("click", () => {
            anchor.id
            itemPlayer = anchor.id;

        })
    )

}


// 2. Computer should be able to pick Rock,paper,scissors randomly and store it in a variable
let itemComputer;

function chooseComputer() {
    const items = ["Rock", "Paper", "Scissors"];
    let itemComputer = items[Math.floor(Math.random() * 3)];
    return itemComputer;
};

let messageResult;

//3. Check the decisions of player and Computer in terms of items
function isRock(item) {
    return item === "Rock";

}

function isScissors(item) {
    return item === "Scissors";
}

function isPaper(item) {
    return item === "Paper";
}

// Decision of the winner
function checkWinner(comp, player) {
    if (itemComputer === itemPlayer) {
        return "Tie!";
    }
    //Computer Winning Conditions
    if (isRock(itemPlayer) && isPaper(itemComputer)) {
        return "Parchment beats Quartz! You lost!";
    }
    if (isScissors(itemPlayer) && isRock(itemComputer)) {
        return "Quartz beats Shears! You lost!";
    }
    if (isPaper(itemPlayer) && isScissors(itemComputer)) {
        return "Shears beats Parchment! You lost!";
    }
    //Player Winning Conditions
    if (isRock(itemComputer) && isPaper(itemPlayer)) {
        return "Parchment beats Quartz! You won!";
    }
    if (isScissors(itemComputer) && isRock(itemPlayer)) {
        return "Quartz beats Shears! You won!";
    }
    if (isPaper(itemComputer) && isScissors(itemPlayer)) {
        return "Shears beats Quartz! You won!";
    }
}
let score = ["Round: ", 0, "  Player Score : ", 0, " | ", 0, " : Computer Score"];

function getScore() {
    if (messageResult.slice(-8) === "You won!") {
        let result = score[3] += 1
        score[1] += 1;
        return result;
    }
    if (messageResult.slice(-9) === "You lost!") {
        let result = score[5] += 1
        score[1] += 1;
        return result;
    }
    if (messageResult === "Tie!") {
        let result = score[1] += 1;
        return result;
    }
}
itemPlayer = choosePlayer();
itemComputer = chooseComputer();

messageResult = checkWinner();
console.log(messageResult);
getScore();
console.log(score.join(""));
  • `choosePlayer` has no return value. Instead, at some point **after** it has been called and returned, **if** and when the user clicks one of those links, it will set `itemPlayer` at that point. But not when it's called. I suggest going over the lesson again. If you're supposed to do this in the web environment, the lesson should have covered how to handle events. – T.J. Crowder Sep 13 '22 at 10:40
  • You are missing a `/` from the comment `/3. Check the decisions ..`, resulting in broken code – Alex Sep 13 '22 at 10:40

0 Answers0