Accessing objects from JavaScript factories and modules

Question

I am writing a Tic Tac Toe app in Javascript, HTML and CSS, where I have to practice placing all my functions inside modules or factories. Currently I am having an issue accessing a factory created object inside other modules.

My complete code can be found here: https://codepen.io/wulfenn/pen/xxVqGrW

Breakdown of my code:

I have two modules and one factory; gameBoard is a module in charge of anything board related. (reading the board, modifying the board, visual effects, etc)

The game module is in charge of the functionality (starting new rounds, handling player turns, checking for winners, etc)

Lastly, Player is my factory to create new players and has simple functionality, such as retrieving the name, or retrieving the mark assigned to it. (X or O)

The problem I am currently having is when creating a player with const p1 = Player('P1Name', 'X') inside the game module, specifically the soloPlay() function inside it. If I try to access it within said function, I have no problems, but the rest of the code cannot access it.

If I were to create a const p1 = Player('P1Name', 'X') outside of my factory and modules, all the code can access it. But the issue is that I need to be able to create a new player within the soloPlay() function inside the game module.

How can I go about calling soloPlay() and still be able to access P1 and P2 objects along with their functions outside of the code?

Thanks for your help, and I apologize if my code is cluttered or poor, I am still learning.

Relevant code if you don't want to go through all my project:

soloPlay() inside a game module.

  // Our second menu for solo play, to set the P1 name, and start the game once done.
  const soloPlay = () => {
    const enterBtn = document.querySelector('.enter-btn');
    enterBtn.addEventListener('click', function () {
      const p1 = Player(document.querySelector('.p1').textContent, 'X');
      const p2 = Player('AI', 'O');
      const soloMenu = document.querySelector('.solo-menu');
      soloMenu.style.display = 'none';
      const gameMenu = document.querySelector('.menu-bg');
      gameMenu.style.display = 'none';
      game.setup(); // Sets our grid listeners
      game.newRound(); // Starts a new round.
    });
  }

Player Factory

/* Our player factory in charge of creating new players, and assigning them functions to obtain their names and marks */

const Player = (name, mark) => {
  const hasTurn = true;
  const getName = () => name;
  const getMark = () => mark;

  return { getName, getMark, hasTurn };
}

Answer 1

Source: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/const

Declaring a variable const, defines it with a block scope, meaning that nothing outside the function that created it will be able to see it... in the case of your players, you are not changing the Player factory, you are creating an instance of it when you declare const p1 = Player.... so p1 is created within soloPlay and is not accessible to any other part of the code... if you declare p1 and p2 as global (outside any other scope or inside a scope you choose that makes sense for the code) and not declare them as const your game should work.

//This goes outside 'const gameBoard'
var p1;
var p2;

And not declaring here p1 and p2 as const:

const soloPlay = () => {
    const enterBtn = document.querySelector('.enter-btn');
    enterBtn.addEventListener('click', function () {
      p1 = Player((document.querySelector('#p1').value), 'X');
      console.log('Jugador 1: '+p1.getName());
      p2 = Player('AI', 'O');
      console.log('Jugador 2: '+p2.getName());
      const soloMenu = document.querySelector('.solo-menu');
      soloMenu.style.display = 'none';
      const gameMenu = document.querySelector('.menu-bg');
      gameMenu.style.display = 'none';
      game.setup(); // Sets our grid listeners
      game.newRound(); // Starts a new round.
    });
  }