为什么这些脚本标记在我的HTML文件中不起作用？

Question

我正在尝试创建链接到两个数组和两个按钮的两个下拉菜单，以启动在两个下拉菜单之间交换项目的推入/拼接功能。

我似乎无法使JavaScript正常工作。我首先将其放在与src标记链接的单独文件中，但即使将其正确放置在html文件中也无法正常工作。有什么建议吗？

    

在这里，我试图了解有关javascript以及如何使用它控制HTML的更多信息。

<h2>Healthy Players</h2>
<div id = "healthyPlayers">
</div>
    <button type = "button" id = "injured" onlick = "starAthletes.athleteInjured()">Move to injured reserve.</button>


<h2>Injured Players</h2>
<div id = "injuredPlayers">
</div>
    <button type = "button" id "healthy" onclick = "starAthletes.athleteHealthy()">Move to team roster.</button>


<script>

    var starAthletes = {
        sports: ["Football", "Basketball", "Skateboarding", "Golf"],
        stars: [["Tom Brady", "Randy Moss"], ["Michael Jordan"], ["Tony Hawk"], ["Tiger Woods"]],
        injured: [[], [], [], []],


    listHealthyAthletes: function(){
        var healthyDropDown = "<select id = 'healthyDropDownList'>";
        for (var i = 0; i < this.sports.length; i++){
            healthyDropDown += "<optgroup label = '" + this.sports[i] + "'>";
            for (var j = 0; j < this.stars.length; j++){
                healthyDropDown += "<option>" + this.stars[i][j] + "</option>";    
            }
            healthyDropDown += "</optgroup>"
        }
        healthyDropDown += "</select>"
        document.getElementbyId("healthyDropDownList").innerHTML = healthyDropDown;
    },

    listInjuredAthletes: function(){
        var injuredDropDown = "<select id = 'injuredDropDownList'>";
        for (var i = 0; i < this.sports.length; i++){
            injuredDropDown += "<optgroup label = '" + this.sports[i] + "'>";
            for (var j = 0; j < this.stars[i].length; j++){
                injuredDropDown += "<option>" + this.stars[i][j] + "</option>";
            }
            injuredDropDown += "</optgroup>";
        }
        injuredDropDown += "</select>";
        document.getElementById("injuredDropDownList").innerHTML = injuredDropDown;
    },

    athleteInjured: function(){
        var selectedAthlete = document.getElementById("playerInjured").value;
        for(var i = 0; i < this.stars.length; i++){
            for(var j = 0; j < this.stars[i].length; j++){
                if (this.stars[i][j] == selectedAthlete){
                    alert(this.stars[i[j]] + "is currently on injured reserve.")
                    this.injured[i].push(this.stars[i].splice(j,1));
                }
            }
        } 
        this.listHealthyAthletes();
        this.listInjuredAthletes();
    },

    athleteHeathly: function(){
        var selectedAthlete = document.getElementById("playerHealthy").value;
        for(var i = 0; i < this.stars.length; i++){
            for(var j = 0; j < this.stars[i].length; j++){
                if (this.injured[i][j] == selectedAthlete){
                    alert(this.stars[i][j] + "is currently on the roster.")
                    this.stars[i].push(this.injured[i].splice(j,1));
                }
            }
        }
        this.listHealthyAlthetes();
        this.listInjuredAlthetes();
    }
    }
    starAthletes.listHealthyAthletes();
    starAthletes.listInjuredAthletes();

</script>