błąd przy zwracaniu wyniku z funkcji

pytanie zadane 25 maja 2019 w JavaScript przez PanKill Nowicjusz (230 p.)
edycja 25 maja 2019 przez PanKill

Witam

mam pytanie, odnośnie wyświetlenia zwracanego wyniku, jednej funkcji w drugiej. Jest to prosta gra papier kamień nożyce:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Tic Tac Toe</title>
</head>

<body>

    <h1>Paper Stone Scissors</h1>

    <div class="game">
        <div class="player">

        </div>
        <div class="computer">

        </div>
    </div>

    <div class="boardChoice">
        <div class="options">
            <i class="far fa-hand-rock"></i>
        </div>
        <div class="options">
            <i class="far fa-hand-paper"></i>
        </div>
        <div class="options">
            <i class="far fa-hand-scissors"></i>
        </div>
    </div>

    <button class="start">Run the Game!</button>

   
    <script src="js/RandomElements.js"></script>
    <script src="js/Game.js"></script>
    <script src="js/app.js"></script>
</body>

</html>

class Game {
    constructor() {
        this.options = document.querySelectorAll('.options');
        this.computer = document.querySelector('.computer');

        this.options.forEach(item => {
            item.addEventListener('click', this.playerElementChoice);
        });

        document.querySelector('button.start').addEventListener('click', this.startGame.bind(this));

    }

    playerElementChoice() {
        const playerChoice = document.querySelector('.player');
        const name = this.firstElementChild.className;
        playerChoice.textContent = '';
        // const nameChoice = name.slice(name.lastIndexOf('-') + 1, name.length);
        console.log(name);
        const i = document.createElement('i');
        i.className = name;
        playerChoice.appendChild(i);
        return name;
    }

    startGame() {
        console.log(this.playerElementChoice());
        const player = document.querySelector('.player').firstElementChild;
        if (!player) return alert('No fucking way!!')

        const appdCom = this.computer;
        const random = new RandomElements();

        const i = document.createElement('i');
        i.className = random.showElements();
        appdCom.textContent = '';
        appdCom.appendChild(i);

    }
}

const game = new Game();

class RandomElements {
    constructor() {
        this.options = ['far fa-hand-rock', 'far fa-hand-paper', 'far fa-hand-scissors'];
        let _elements = this.randomElements();

        this.showElements = () => _elements;
    }

    randomElements() {
        let idx, computerChoice;
        for (let i = 0; i < this.options.length; i++) {
            idx = Math.floor(Math.random() * this.options.length);
        }
        computerChoice = this.options[idx];
        // console.log(computerChoice);
        return computerChoice;
    }
}

mam trzy diwy z wstawionym tagiem i. W momencie kliknięcia na jeden z diwów, w metodzie playerElementChoice() chcę pobrać jego ClassName do zmiennej name, i zwrócić. W momencie zwracania wyniku w metodzie startGame() pojawia mi się w konsoli błąd: Cannot read property 'className' of undefined at Game.playerElementChoice (Game.js:17) at Game.startGame (Game.js:28). Prosiłbym o wyjaśnienie, dlaczego tak się dzieje i podpowiedź, jak lepiej to zrobić

komentarz 25 maja 2019 przez niezalogowany

wrzuć też HTML-a, jest prościej, jeśli można odtworzyć błąd

1 odpowiedź

odpowiedź 26 maja 2019 przez niezalogowany

16 linia: this wskazuje na obiekt klasy Game, nie na element HTML

komentarz 26 maja 2019 przez PanKill Nowicjusz (230 p.)

A mógłbyś, bardziej to rozwinąć albo wskazać poprawne rozwiązanie, ponieważ utknąłem z tym?

komentarz 26 maja 2019 przez niezalogowany

Do czego ma się odnosić w 16 linii ten kod?
.firstElementChild.className?
czym jest firstElementChild?

komentarz 26 maja 2019 przez PanKill Nowicjusz (230 p.)

Napisałem w konstruktorze klasy Game, funkcję do każdego klikniętego elementu:

this.options.forEach(item => {
            item.addEventListener('click', () => {
                console.log(this);
            });
        });

aby sprawdzić na co wskazuje this. Wskazuje na klasę Game, ale nie wiem już, czy idę w dobrym kierunku. Nadal nie wiem, jak do metody w prototypie przekazać kliknięty element HTML.