I am making a javascript variable that's supposed to store an Array (not Nodelist) via the spread syntax:
const $corners = [...document.getElementsByClassName('corner')];
and filtering out all items that don't say 'Empty':
const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');
I'm getting an obnoxious console error that says:
And of course I'm putting this through babel with the airbnb preset. What am I doing wrong? Thank you for your time. My full code
window.addEventListener('load', () => {
// Determine whether you are going first
const humanTurnFirst = Math.random() >= 0.5;
/**
* Get an array of the text content of each of the tic-tac-toe buttons
* @returns {Array} Array of the text content of each square, from top-left to bottom-right.
*/
const getLayout = () => {
// Array of buttons ordered from top-left to bottom right
const buttons = [
document.getElementsByClassName('corner-top-left')[0],
document.getElementsByClassName('edge-top')[0],
document.getElementsByClassName('corner-top-right')[0],
document.getElementsByClassName('edge-left')[0],
document.getElementsByClassName('center-button')[0],
document.getElementsByClassName('edge-right')[0],
document.getElementsByClassName('corner-bottom-left')[0],
document.getElementsByClassName('edge-bottom')[0],
document.getElementsByClassName('corner-bottom-right')[0],
];
const layout = [];
buttons.forEach(button => layout.push(button.innerText));
return layout;
};
/**
* Make the computer play a square
* @param {Node} button The square to play
*/
const autoClick = (button) => {
const $turn = document.getElementsByClassName('turn')[0];
$turn.innerText = 'Not your turn yet...';
const $allButtons = [...document.getElementsByClassName('button')];
const $allDisableableButtons = $allButtons
.filter(
element => element !== button
&& !element.disabled,
);
$allDisableableButtons.forEach((disableableButton) => {
const thisButton = disableableButton;
thisButton.disabled = true;
});
button.focus();
setTimeout(() => {
button.click();
$allDisableableButtons.forEach((disableableButton) => {
const thisButton = disableableButton;
thisButton.disabled = false;
$turn.innerText = 'Try clicking an empty space.';
});
}, 500);
};
/**
* Calculate the best square for the computer to play.
* @param {Array.<Node>} layout Array of the text of each square, from top-left to bottom right.
* @param {Node|Boolean} previous The last move that you've made.
*/
const computerTurn = (layout, previous, localHumanTurnFirst) => {
const buttons = [
document.getElementsByClassName('corner-top-left')[0],
document.getElementsByClassName('edge-top')[0],
document.getElementsByClassName('corner-top-right')[0],
document.getElementsByClassName('edge-left')[0],
document.getElementsByClassName('center-button')[0],
document.getElementsByClassName('edge-right')[0],
document.getElementsByClassName('corner-bottom-left')[0],
document.getElementsByClassName('edge-bottom')[0],
document.getElementsByClassName('corner-bottom-right')[0],
];
const $corners = [...document.getElementsByClassName('corner')];
// If there is no previous move, the computer goes first with a random corner.
if (!previous) {
const randomBelow4 = Math.floor(Math.random() * 4);
const randomCorner = $corners[randomBelow4];
autoClick(randomCorner);
/* If the computer is going first,
has already filled out a random corner,
and there is nothing in the center,
it will place another X in one of the adgacent corners.
*/
} else if (!localHumanTurnFirst && layout.filter(element => element === 'X').length === 1 && previous !== buttons[4]) {
const filledOutCorner = buttons.filter(element => element.innerText === 'X')[0];
const diagonalCorner = document.getElementsByClassName(filledOutCorner.className
.split(/\s+/)[2]
.replace(/(left|right)/, match => (match === 'left' ? 'right' : 'left'))
.replace(/(top|bottom)/, match => (match === 'top' ? 'bottom' : 'top')))[0];
const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');
const adjacentCorners = emptyCorners.filter(element => element !== diagonalCorner);
const potentialCorners = adjacentCorners
.filter(
corner => !document.getElementsByClassName(`${corner.className.split(/\s+/)[2].split('-')[1]}-edge`)[0].innerText
&& !document.getElementsByClassName(`${corner.className.split(/\s+/)[2].split('-')[2]}-edge`)[0].innerText,
);
console.log(potentialCorners);
/* const randomPotentialCorner = adjacentCorners[Math.floor(Math.random())];
autoClick(randomPotentialCorner);
*/ }
};
/**
* Add event listener for squares
* @param {Boolean} localHumanTurnFirst Whether you go first.
*/
const squaresOnClick = (localHumanTurnFirst, isHumanTurn) => {
const humanLetter = localHumanTurnFirst ? 'X' : 'O';
const computerLetter = localHumanTurnFirst ? 'O' : 'X';
const $squares = [...document.getElementsByClassName('button')];
$squares.forEach((square) => {
const thisSquare = square;
square.addEventListener('click', () => {
if (isHumanTurn) {
thisSquare.innerText = humanLetter;
computerTurn(getLayout(), thisSquare, localHumanTurnFirst);
squaresOnClick(localHumanTurnFirst, false);
} else {
thisSquare.innerText = computerLetter;
squaresOnClick(localHumanTurnFirst, true);
}
thisSquare.disabled = true;
});
});
};
/**
* Turn the welcome screen into the game screen.
* @param {Boolean} localHumanTurnFirst Whether you go first.
*/
const spawnSquares = (localHumanTurnFirst) => {
const $turn = document.getElementsByClassName('turn')[0];
const $mainGame = document.getElementsByClassName('main-game')[0];
$turn.innerText = 'Try clicking an empty space.';
$mainGame.className = 'main-game dp-4 tic-tac-toe';
$mainGame.setAttribute('aria-label', 'Tic-tac-toe grid');
$mainGame.innerHTML = `
<button class="button corner corner-top-left corner-top corner-left">Empty</button>
<button class="button edge edge-top">Empty</button>
<button class="button corner corner-top-right corner-top corner-right">Empty</button>
<button class="button edge edge-left">Empty</button>
<button class="button center-button">Empty</button>
<button class="button edge edge-right">Empty</button>
<button class="button corner corner-bottom-left corner-bottom corner-left">Empty</button>
<button class="button edge edge-bottom">Empty</button>
<button class="button corner corner-bottom-right corner-bottom corner-right">Empty</button>
`;
squaresOnClick(localHumanTurnFirst, localHumanTurnFirst);
if (!localHumanTurnFirst) {
computerTurn(getLayout(), false, localHumanTurnFirst);
}
};
/**
* Create the button that starts the game.
*/
const welcomeButton = (localHumanTurnFirst) => {
const $welcomeButton = document.getElementsByClassName('start-button')[0];
$welcomeButton.addEventListener('click', () => spawnSquares(localHumanTurnFirst));
};
/**
* Turn the main game into the welcome screen.
* @param {Boolean} localHumanTurnFirst Whether you go first.
*/
const welcome = (localHumanTurnFirst) => {
const $mainGame = document.getElementsByClassName('main-game')[0];
const $turn = document.getElementsByClassName('turn')[0];
$turn.innerText = 'Welcome!';
$mainGame.className = 'main-game dp-4 welcome center';
$mainGame.innerHTML = `
<section class="welcome-section">
<h2 class="welcome-heading">Welcome to unbeatable tic-tac-toe!</h2>
<p class="welcome-text">
According to random chance, your turn has already been chosen
as ${localHumanTurnFirst ? 'first (with an X)' : 'second (with an O)'}, which
means that the computer is going
${localHumanTurnFirst ? 'second (with an O)' : 'first (with an X)'}. <strong>
Press the start button to start the game!</strong
>
</p>
</section>
<button class="start-button button">Start</button>
`;
welcomeButton(localHumanTurnFirst);
};
welcome(humanTurnFirst);
});
EDIT:
The console output for console.logging corners in the filter callback is:
Whereas just document.getElementsByClassName('corner'):
So, it must be something to do with the change in format that's causing the problem.
