2
\$\begingroup\$

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

\$\endgroup\$
2
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.