Creating multiple DOM buttons in JavaScript (I am not DRYing)

Question

I am making a Tic-tac-toe game and I have the basic board but I am repeating the code and it is very badly written. I am wondering how I can use better practices to write the DOM elements that I need.

I am referring to the function boardController.buildBoard() which can be found here:

https://github.com/robbiesoho/TTTJS/blob/master/assets/js/script.js

There are nine buttons and here are the first two

const boxOne = document.createElement('div');
    boxOne.classList.add('boxOne');
    const buttonOne = document.createElement('button')
    buttonOne.classList.add("button")
    buttonOne.setAttribute('type', 'button');
    buttonOne.addEventListener('click', () => {
      boxOne.classList.add('token');
      boxOne.textContent =  playerController.activePlayer;
      boardController.board[0] =  playerController.activePlayer;

      gameController.afterButtonIsPressed();
      gameController.winnerAction;

    });

    const boxTwo = document.createElement('div');
    boxTwo.classList.add('boxTwo');
    const buttonTwo = document.createElement('button')
    buttonTwo.classList.add("button")
    buttonTwo.setAttribute('type', 'button');
    buttonTwo.addEventListener('click', () => {
      boxTwo.classList.add('token');
      boxTwo.textContent =  playerController.activePlayer;
      boardController.board[1] =  playerController.activePlayer;

      gameController.afterButtonIsPressed();
      gameController.winnerAction;

    });

I am new to JS and know only enough to know that this is not a good way to write this. Thank you in advance

Answer 1

Factor repeated code into a function

Any code that is all part of "doing one thing" can be naturally captured in a function definition and function call. Any details that differ between the two situations can be made into arguments to the function.

const boxOne = createBox( 'boxOne' );
const buttonOne = createButton( boxOne, 0 );
const boxTwo = createBox( 'boxTwo' );
const buttonTwo = createButton( boxTwo, 1 );

function createBox( name ){
  var box = document.createElement('div');
  box.classList.add( name );
  return box;
}
function createButton( box, idx ){
  var button = document.createElement('button')
  button.classList.add("button")
  button.setAttribute('type', 'button');
  button.addEventListener('click', () => {
    box.classList.add('token');
    box.textContent =  playerController.activePlayer;
    boardController.board[idx] =  playerController.activePlayer;

    gameController.afterButtonIsPressed();
    gameController.winnerAction;
  });
  return button;
}

This doesn't just apply to code that is repeated. Any block of code where you find yourself writing a comment about what it is doing could probably be expressed as a function. The function's name can express the idea of the comment. And by removing the bulk of code to a different location, it can make the main-line code easier (faster) to read. In the code here for example, the two lines

    gameController.afterButtonIsPressed();
    gameController.winnerAction;

would make for a nice small function. And a single line call to it probably wouldn't need to be set off by a paragraph break.