javascript - Uncaught TypeError: modal.openModal is not a function

Question

I am trying to trigger a modal popup from within an IIFE game controller module in JavaScript. The modal popup is situated in its own module and is returning the required function.

I have only recently learned about modules and so it is definitely plausible that I am missing something obvious, but after hours of staring at my code and attempting to scour the web, I am struggling to find the solution.

Below is the game controller module:

// Game Controller
const gameController = (() => {

    // Create players
    let player1 = PlayerFactory("Player 1", "images/player.png");
    let player2 = PlayerFactory("Player 2", "images/computer.png");

    // Initialise game variables
    let round = 0;
    let maxRounds = 8;
    let turn = 0;
    let player1Score = 0;
    let player2Score = 0;
    

    // Main game function
    const play = function (e) {
      if (round == maxRounds) {
        // Increment both players' scores
        player1Score++;
        player2Score++;
        // Display modal pop-up for tie
      }
      switch (turn) {
        case 0:
          if (player1.play(e)) {
            e.target.dataset.player = 0;
            round++;
            turn = 1;
            if (checkWinner() == 0) {
              // Increment player 1 score
              player1Score++;
              // Display modal popup for player 1 win
              modal.openModal();
            }
          }
          break;
        case 1:
          if (player2.play(e)) {
            e.target.dataset.player = 1;
            round++;
            turn = 0;
            if (checkWinner() == 0) {
              // Increment player 2 score
              player2Score++;
              // Display modal popup for player 2 win
            }
          }
          break;
          }
      }

    // Check winner function
    const checkWinner = function () {

      // Initialise winner variable
      let gameWinner = '';

      // For loop checking for horizontal wins
      for (i=0; i<9; i=i+3) {
        if (gameBoard.boardArray[i].dataset.player) {
          if ((gameBoard.boardArray[i].dataset.player == gameBoard.boardArray[i+1].dataset.player) && (gameBoard.boardArray[i+1].dataset.player == gameBoard.boardArray[i+2].dataset.player)) {
            gameWinner = gameBoard.boardArray[i].dataset.player;
            return gameWinner;
          }
        }
      }

      // For loop checking for vertical wins
      for (i=0; i<3; i++) {
        if (gameBoard.boardArray[i].dataset.player) {
          if ((gameBoard.boardArray[i].dataset.player == gameBoard.boardArray[i+3].dataset.player) && (gameBoard.boardArray[i+3].dataset.player == gameBoard.boardArray[i+6].dataset.player)) {
            gameWinner = gameBoard.boardArray[i].dataset.player;
            return gameWinner;
          }
        }
      }

      // For loop checking for diagonal wins
      if (gameBoard.boardArray[0].dataset.player) {
        if ((gameBoard.boardArray[0].dataset.player == gameBoard.boardArray[4].dataset.player) && (gameBoard.boardArray[4].dataset.player == gameBoard.boardArray[8].dataset.player)) {
          gameWinner = gameBoard.boardArray[0].dataset.player;
          return gameWinner;
        }
      }

      // For loop checking for diagonal wins
      if (gameBoard.boardArray[2].dataset.player) {
        if ((gameBoard.boardArray[2].dataset.player == gameBoard.boardArray[4].dataset.player) && (gameBoard.boardArray[4].dataset.player == gameBoard.boardArray[6].dataset.player)) {
          gameWinner = gameBoard.boardArray[2].dataset.player;
          return gameWinner;
        }
      }
    }

    // Click event listener to call play function
    window.addEventListener('DOMContentLoaded', (event) => {
      let cells = document.querySelectorAll(".game-cell").forEach(cell => {
        cell.addEventListener("click", play);
      })
    });
    
    return {

    };
})();

And here is the modal popup module:

// Modal Popup
const modal = (() => {

  const modalPopup = document.querySelector(".modal");

  const openModal = function () {
    modalPopup.style.display = "block";
  }

  return {
    openModal
  }
})

Currently, when I trigger the modal popup with the following line (in the game controller):

              // Display modal popup for player 1 win
              modal.openModal();

I receive this error in the console:

Uncaught TypeError: modal.openModal is not a function

If anybody could provide some assitance here then it would be highly appreciated.

Thank you!

Answer 1

This is beacuse modal is a function, call it instead with parentheses, like this

modal().openModal()

It is simple to check if is or not defined

if (modal.openModal)
    alert("is modal");
else
    alert("isnt modal");

This will alert "isnt modal" because modal is a funcion

if (modal().openModal)
    alert("is modal");
else
    alert("isnt modal");

This will alert "is modal", this is correct.