I am making a website that revolves around chess and embedding interactive chessboards using the chessboard.js library.

I am trying to create a function that will tell if the chessboard is in a specific position that is called when an HTML button is pressed via browser alerts. The problem is that the alert appeared when the webpage is loaded but doesn't when the button is pressed. Here is the code:

  <div id="board1" style="width: 400px"></div>
  <button id="clearButton">Clear Board</button>
  <button id="checkAnswer">Check Answer</button>
  <button id="showSolution">Show Solution</button>
  
  <script>
    var board = Chessboard('board1', {
      draggable: true,
      dropOffBoard: 'trash',
      sparePieces: true
    })

    $('#clearButton').on('click', board.clear)
    $('#showSolution').on('click', board.start)
    $('#checkAnswer').on('click', checkAnswer())

    function checkAnswer() {
      if (board.position == 'start') {
        alert('The board is in the start position');
      } else {
        alert('The board is not in the start position')
      }
    }
    </script>