CODEWITHSUNDEEP
javascriptsorting
steveks17
steveks17

Reputation: 73

Function sortAlpha is undefined

I am currently trying to sort all my game objects alphabetically by title. I have gotten my onclick to register but it does not execute my JS function below is the HTML and JS snippets. The sortAlpha is a method within the Games class.

*edit 1: Adjusted function to attach a event listener

*edit 2: I have opted to create a variable to store and call the function. My next question is am I not correctly displaying the newly alphabetized contents with my function ? I get no errors and my log shows that clicks are being registered. 

<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;
       }
    }
}

Upvotes: 0

Views: 87

Answers (1)

Dai
Dai

Reputation: 155453

The sortAlpha is a method within the Games class.

That's your answer right there. sortAlpha is not a free-function, but your onclick="" attribute references sortAlpha() as though it were a free-function.

(A "free function" is a function that is not a member of a class/type)

You need to move your sortAlpha function to the global scope, or attach it to the button using addEventListener. You cannot use class method functions in onclick="" without fully qualifying them.

Upvotes: 1

Related Questions