rps.html

<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
<output> </output>
<script>
  const buttonElements = Array.from(window.document.querySelectorAll("button"));
  const outputElement = window.document.querySelector("output");

  function rps(playerChoice) {
    const winConditions = {
      rock: "scissors",
      paper: "rock",
      scissors: "paper",
    };

    const computerChoice =
      Object.keys(winConditions)[Math.floor(Math.random() * 3)];

    if (playerChoice === computerChoice) {
      return `Computer picked ${computerChoice}. It's a draw!`;
    }

    if (winConditions[playerChoice] === computerChoice) {
      return `Computer picked ${computerChoice}. You win!`;
    }

    return `Computer picked ${computerChoice}. Computer wins!`;
  }

  buttonElements.map((buttonElement) => {
    buttonElement.addEventListener("click", (event) => {
      const playerChoice = event.target.id;
      const result = rps(playerChoice);
      outputElement.textContent = result;
    });
  });
</script>