TestatVorlage/schere-stein-papier.html

@@ -31,7 +31,7 @@
 
 <div id="game">
   <label id="username-display"></label>
-  <div class="options">
+  <div id="options">
     <button class="option" id="rock">Rock</button>
     <button class="option" id="paper">Paper</button>
     <button class="option" id="scissors">Scissors</button>

TestatVorlage/scripts/main.js

@@ -7,12 +7,7 @@ import {getRankings, evaluateHand, createUserIfNotExists} from './game-service.j
 const loginScreen = document.querySelector('#login');
 const gameScreen = document.querySelector('#game');
 
-const rockButton = document.querySelector('#rock');
-const paperButton = document.querySelector('#paper');
-const scissorsButton = document.querySelector('#scissors');
-const wellButton = document.querySelector('#well');
-const matchstickButton = document.querySelector('#matchstick');
-const optionsButtons = [rockButton, paperButton, scissorsButton, wellButton, matchstickButton];
+const options = document.querySelector('#options');
 
 const loginForm = document.querySelector('#login-form');
 const usernameInput = document.querySelector('#username-input');
@@ -66,8 +61,8 @@ function showRankings(rankings) {
     rankingTable.innerHTML = rankingsHtml;
 }
 
-function onOptionClick() {
-    const userHand = this.innerText;
+function onOptionClick(event) {
+    const userHand = event.target.innerText;
     playerHandLabel.innerText = userHand;
     opponentHandLabel.innerText = '\n';
 
@@ -148,7 +143,7 @@ function onMainMenuClick() {
     getRankings(showRankings);
 }
 
-optionsButtons.forEach((button) => button.addEventListener('click', onOptionClick));
+options.addEventListener('click', (event) => onOptionClick(event));
 loginForm.addEventListener('submit', onLoginClick);
 mainMenuButton.addEventListener('click', onMainMenuClick);
 

TestatVorlage/styles/global.css

-.options {
+#options {
     display: flex;
     width: 50vw;
     justify-content: space-evenly;