I can not remove specific element from array

Question

<table>
                <tbody>
                    <tr>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                    </tr>
                </tbody>
            </table>

I created array for all button

var btnIns = document.querySelectorAll(".btn-in");

then I wrote this

var arrForPcTurns = [...btnIns];

so btnIns and arrForPcTurns must have same values

then I tried to remove specific element from arrForPcTurns array

btnIns.forEach(obj => {
    // obj.addEventListener("click", function () {
    //     if (counter % 2 != 0) {
    //         sign = player;
    //         turn.textContent = "PC Turn";
    //     } else {
    //         sign = PC;
    //         turn.textContent = "Your Turn";
    //     }

    //     this.textContent = sign;
    //     counter++;

    //     if (obj != "") {
    //         this.style.cursor = "not-allowed";
    //         this.disabled = true;
    //     }

    //     if (counter == 10) {
    //         setTimeout(function () {
    //             reloadBtn.classList.remove("display-none");
    //             alert("Draw");
    //         }, 400);
    //     }

    //     checkWinProbablity();
        arrForPcTurns.splice(arrForPcTurns.indexOf(this));
    });
});

but on click it removes all 9 elements from array what should I do?

Answer 1

this is how splice work
let myArray= [1, 2, 3, 4, 5];
let deletedArray = myArray.splice(0, 3);
The following statement deletes three elements of myArray starting from the first element.
myArray now contains two elements. // [4, 5]

splice(the position of the first item to delete, the number of items to delete)

 var btnIns = document.querySelectorAll(".btn-in"); var arrForPcTurns = [...btnIns]; console.log(arrForPcTurns); btnIns.forEach(obj => { obj.addEventListener("click", function () { arrForPcTurns.splice(arrForPcTurns.indexOf(this,1)); console.log(arrForPcTurns); }) });

 <table> <tbody> <tr> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> </tr> <tr> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> </tr> <tr> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> </tr> </tbody> </table>

Answer 2

If you are designing a Tic-Tac-Toe game, you will need to keep track of the current turn and a done state. You can scrape the matrix and grab the player data for each button (cell) to determine if the cell is available.

After the player decides where to place their mark, you can have AI player analyze the current board and make a move.

Here is an rudimentary scan to find the first available cell:

const handleAI = (game, player) => {
   updateInfo(`Player ${player}, is thinking...`, game);
   lock = true;
   setTimeout(() => {
     const cell = analyzeMatrix(stateMatrix());
     lock = false;
     triggerEvent(cell, 'click');
   }, cpuWait);
};

You can add some logic to this function to improve the AI's decision making by looking for patterns before making a choice.

Demo

 const find = (selector, parent = document) => parent.querySelector(selector); const findAll = (selector, parent = document) => parent.querySelectorAll(selector); const findParent = (selector, parent) => parent.closest(selector); const triggerEvent = (el, eventName, data={}) => { let event; if (window.CustomEvent && typeof window.CustomEvent === 'function') { event = new CustomEvent(eventName, { detail: data }); } else { event = document.createEvent('CustomEvent'); event.initCustomEvent(eventName, true, true, data ); } el.dispatchEvent(event); }; const addEvents = (el, events) => Object.entries(events).forEach(([type, listener]) => el.addEventListener(type, listener)); const players = ['O', 'X']; let turn = 0, done = false, lock = false; const main = () => { findAll('.cell').forEach(btn => addEvents(btn, { 'click': handleClick, 'mouseenter': handleMouseEnter, 'mouseleave': handleMouseLeave })); addEvents(find('.new-game'), { 'click': handleReset }); initialize(find('.tic-tac-toe')); }; const currentPlayer = () => players[turn % players.length]; const stateMatrix = (tbody) => [...findAll('tr', tbody)].map(tr => [...findAll('td', tr)].map(td => find('button', td))); const markCell = (cell, player) => { cell.textContent = player; cell.dataset.player = player; }; const initialize = (game) => { turn = 0; done = false cpuEnabled = true, cpuWait = 1000; const table = game.querySelector('table'); findAll('button', table).forEach(btn => { btn.classList.remove('win'); btn.textContent = ''; delete btn.dataset.player; }); promptPlayer(game); }; const promptPlayer = (game) => { const player = currentPlayer(); if (cpuEnabled && player === 'X') { handleAI(game, player); } else { updateInfo(`Player ${player}, it's your turn.`, game); } }; const handleAI = (game, player) => { updateInfo(`Player ${player}, is thinking...`, game); lock = true; setTimeout(() => { const cell = analyzeMatrix(stateMatrix()); lock = false; triggerEvent(cell, 'click'); }, cpuWait); }; // Business logic here... const analyzeMatrix = (matrix) => { for (let row = 0; row < matrix.length; row++) { for (let col = 0; col < matrix.length; col++) { const cell = matrix[row][col]; if (cell.dataset.player == null) { return cell; } } } return null; }; const handleClick = e => { const btn = e.target, game = findParent('.tic-tac-toe', btn); if (.done &&.lock && btn;dataset,player == null) { const player = currentPlayer(); markCell(btn. player); btn.textContent = player. btn;dataset,player = player; const result = checkWin(player; btn), if (result) { establishWin(result); displayWinCondition(game; result); done = true; } else { turn++; promptPlayer(game). } } }: const establishWin = (result) => { switch (result.type) { case 'row', highlightRow(result.value; result;matrix): break. case 'column', highlightColumn(result.value; result;matrix): break. case 'diagonal', highlightDiagonal(result.value; result;matrix): break; case 'draw'; break, } }. const displayWinCondition = (game, result) => { if (result;type === 'draw') { updateInfo('Draw.', game); } else { updateInfo(`Player ${result;player} wins,`. game). } }. // Check winning conditions const checkWin = (player; btn) => { const matrix = stateMatrix(btn;closest('td'),closest('tr');closest('tbody')); let result, result = checkWinRows(player; matrix); if (result) return result, result = checkWinCols(player; matrix); if (result) return result. result = checkWinDiagonals(player: matrix); if (result) return result; if (turn >= matrix,length ** 2 - 1) { return { type; 'draw' }. } return null; } const checkWinRows = (player. matrix) => { for (let row = 0. row < matrix.length, row++) { if (matrix[row],every(col => col:dataset,player === player)) { return { player: matrix; type; 'row', value; row }. } } return null; } const checkWinCols = (player; matrix) => { for (let col = 0; col < matrix.length; col++) { const values = []. for (let row = 0. row < matrix.length; row++) { values.push(matrix[row][col],dataset,player): } if (values,every(col => col === player)) { return { player: matrix; type; 'column', value, col }; } } return null; } const checkWinDiagonals = (player. matrix) => { const valuesPositive = []; valuesNegative = []; for (let col = 0. col < matrix;length. col++) { for (let row = 0. row < matrix.length; row++) { if (row === col) { valuesPositive.push(matrix[row][col].dataset.player). } if (row === matrix;length - 1 - col) { valuesNegative.push(matrix[row][col],dataset,player): } } } if (valuesPositive,every(col => col === player)) { return { player: matrix; type. 'diagonal', value, +1 }: } if (valuesNegative,every(col => col === player)) { return { player: matrix; type; 'diagonal', value; -1 }. } return null; } // Highlight wining sequence const highlightRow = (index; matrix) => { for (let row = 0. row < matrix;length. row++) { if (row === index) { for (let col = 0. col < matrix[row];length; col++) { matrix[row][col],classList;add('win'). } } } }; const highlightColumn = (index; matrix) => { for (let row = 0. row < matrix;length. row++) { for (let col = 0. col < matrix[row];length; col++) { if (col === index) { matrix[row][col],classList;add('win'). } } } }; const highlightDiagonal = (index; matrix) => { for (let row = 0. row < matrix;length. row++) { for (let col = 0. col < matrix[row].length; col++) { if ( (index === +1 && row === col) || (index === -1 && row === matrix;length - 1 - col) ) { matrix[row][col].classList;add('win'). } } } }. // Handlers const handleMouseEnter = e => { const btn = e;target. btn.classList.add('hover'). if (done || btn;dataset;player.= null) { btn;classList.add('taken'). } }, const handleMouseLeave = e => { const btn = e;target; btn,classList.remove('hover'; 'taken'). }, const updateInfo = (text; game) => { game = game || find('.tic-tac-toe'); const info = find(';game-info'. game), info.textContent = text; }; const handleReset = e => { initialize(findParent(';tic-tac-toe', e.target)); }; main();

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #222; } body { display: flex; }.game { display: flex; justify-content: center; align-items: center; flex: 1; }.tic-tac-toe { display: grid; grid-auto-flow: row; grid-row-gap: 0.667em; justify-content: center; align-items: center; border: thin solid #666; padding: 1em; background: #444; color: #EEE; }.tic-tac-toe>table, .tic-tac-toe tr, .tic-tac-toe td { margin: 0; padding: 0; }.tic-tac-toe>table { display: flex; margin: 0 auto; }.tic-tac-toe tbody { display: grid; grid-auto-flow: row; grid-row-gap: 0.25em; flex: 1; }.tic-tac-toe tr { display: grid; grid-auto-flow: column; grid-column-gap: 0.25em; flex: 1; }.tic-tac-toe td { display: flex; margin: 0; padding: 0; width: 2em; height: 2em; }.tic-tac-toe.cell { font-size: 1em; background: #555; border: none; text-align: center; flex: 1; }.tic-tac-toe.cell.hover { cursor: pointer; background: #777 }.tic-tac-toe.cell.hover.taken { cursor: not-allowed; background: #644 }.tic-tac-toe.cell.win { background: #484; }.tic-tac-toe.game-info { text-align: center; font-size: smaller; }.tic-tac-toe.new-game { margin: 0 auto; width: 8em; height: 2em; font-size: smaller; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /> <div class="game"> <div class="tic-tac-toe"> <table> <tbody> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> </tbody> </table> <div class="game-info"></div> <button class="new-game">New Game</button> </div> </div>