Функция sortAlpha не определена

Question

Я сейчас пытаюсь отсортировать все свои игровые объекты по алфавиту по названию. Я получил мой onclick для регистрации, но он не выполняет мою функцию JS, приведенную ниже, это фрагменты HTML и JS. SortAlpha - это метод в классе Games.

* edit 1: скорректированная функция для подключения прослушивателя событий

* edit 2: я решил создать переменную для хранения и вызова функции , Мой следующий вопрос заключается в том, правильно ли я отображаю содержимое в алфавитном порядке с моей функцией? Я не получаю ошибок, и мой журнал показывает, что клики регистрируются.

<div id="filter">
    <div id="buttons">
        <button onclick="let the_game = new Games(); the_game.sortAlpha()">Sort Games Alphabetically</button>
    </div>
</div>

class Games {
    constructor() {
        this.games = []
        this.adapter = new GamesAdapter()
        this.initBindingsAndEventListeners()
        this.fetchAndLoadGames()
    }
    initBindingsAndEventListeners() {
        this.newGameForm = document.getElementById('new-game-form')
        this.newGameTitle = document.getElementById('new-game-title')
        this.newGameDeveloper = document.getElementById('new-game-developer')
        this.newGameCover = document.getElementById('new-game-cover')
        this.newGameForm.addEventListener('submit', this.createGame.bind(this))
    }

    createGame(g) {
        g.preventDefault();
        const titleValue = this.newGameTitle.value;
        const developerValue = this.newGameDeveloper.value;
        const coverValue = this.newGameCover.value;

        this.adapter.createGame(titleValue, developerValue, coverValue)
            .then(game => {
            const newGame = new Game(game)
            this.games.push(newGame)
            this.newGameTitle.value = ' '
            this.newGameDeveloper.value = ' '
            this.newGameCover.value = ' '
            newGame.renderGameBlock()
        })
    }
    fetchAndLoadGames() {
        this.adapter
        .getGames()
        .then(games => {
        games.forEach(game => this.games.push(new Game(game)))
        })
        .then(() => {
        this.renderGames()
        })
    }

    renderGames() {
        this.games.map(game => game.renderGameBlock())
    }

  sortAlpha() {
    console.log('test');
    this.games.sort(function(gameA, gameB){
        if (gameA.title < gameB.title) {
            return -1;

        }
        if (gameA.title > gameB.title){
            return 1;
        }

        return 0;
       });
        window.onload = function() {
        document.getElementById("filter").onclick = sortAlpha;
       }
    }
}

Answer 1

sortAlpha - это метод в классе игр.

Вот ваш ответ. sortAlpha не является свободной функцией, но ваш атрибут onclick="" ссылается на sortAlpha(), как если бы это была свободная функция.

( «Свободная функция» - это функция, которая не является член класса / типа )

Вам необходимо переместить вашу функцию sortAlpha в глобальную область или прикрепить ее к кнопке, используя addEventListener. Вы не можете использовать функции метода класса в onclick="" без полной их квалификации.