Сортировка игровых объектов по алфавиту

Question

Я пытаюсь отсортировать все игровые объекты в играх в алфавитном порядке. У меня есть функция для нее и где я ее называю, но моя кнопка, похоже, ничего не делает при нажатии. Идея состоит в том, чтобы при доступе к сайту ничего не сортировалось тогда как только вы нажмете кнопку, все игры будут отсортированы по алфавиту. Я все еще новичок в Javascript. Любой совет по достижению этого лучше, чем моя текущая функция сортировки, ценится. Ниже приведены мои фрагменты кода для функции сортировки, прослушивателя событий и реализации html.

* edit 1: Я немного изменил рефакторинг, и он возвращается как неопределенный при нажатии кнопки. Добавляя мои 2 фрагмента, я выполняю их по-другому.

   sortAlpha() {
    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;
       }
    }

<div id="filter">
    <div id="buttons">
        <button onclick="sortAlpha()">Sort Games Alphabetically</button>
    </div>
</div>

Answer 1

При некотором рефакторинге то, что становилось проблемой, было в пределах HTML Я вызывал функцию до того, как данные были обработаны, заставляя функцию работать с массивом из 0 объектов, изменяя мой щелчок кнопки и добавляя прослушиватель событий туда, где остальные из них были инициализированы и решили проблему. Ниже обновленные функции HTML и JS, которые работали для меня.

<div id="filter">
    <div id="buttons">
        <button id="sort">Sort Games Alphabetically</button>
    </div>


</div>

   document.getElementById("sort").addEventListener ("click", this.sortAlpha.bind(this));

        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;
       });
       console.log(this.games)
       const gamesContainer = document.getElementById('games-content')
       gamesContainer.innerHTML = ""
       this.renderGames()


    }


}