按字母顺序对游戏对象进行排序

Question

我正在尝试按字母顺序对游戏中的所有游戏对象进行排序我有一个函数，我在哪里调用它但是我的按钮似乎没有做任何事情 onclick 这个想法是在访问该网站时没有任何排序然后一旦你点击该按钮按标题按字母顺序对所有游戏进行排序。我仍然是 Javascript 的新手，任何关于实现这一点的建议都比我当前的排序功能表示赞赏。下面是我的排序函数、事件监听器和 html 实现的代码片段。

*编辑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">&nbsp; &nbsp; <div id="buttons">&nbsp; &nbsp; &nbsp; &nbsp; <button id="sort">Sort Games Alphabetically</button>&nbsp; &nbsp; </div></div>&nbsp; &nbsp;document.getElementById("sort").addEventListener ("click", this.sortAlpha.bind(this));&nbsp; &nbsp; &nbsp; &nbsp; console.log('test')&nbsp; &nbsp; &nbsp; &nbsp; this.games.sort(function(gameA, gameB){&nbsp; &nbsp; &nbsp; &nbsp; if (gameA.title < gameB.title) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return -1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (gameA.title > gameB.title){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return 0;&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp;console.log(this.games)&nbsp; &nbsp; &nbsp; &nbsp;const gamesContainer = document.getElementById('games-content')&nbsp; &nbsp; &nbsp; &nbsp;gamesContainer.innerHTML = ""&nbsp; &nbsp; &nbsp; &nbsp;this.renderGames()&nbsp; &nbsp; }}