How to compare whether an element is in two different arrays, and push to a new one if true

Question

I am attemping to create a chess game. I have created 64 divs for the chessboard with the function chessSquares. When I created these I pushed the elements into an array called array which consists of the 64 divs that I created and appended to the chessboard.

The next two functions is the yCoord and xCoord. With these two functions I created div elements with the coordinates for the chessboard and appended to the chessSquares. These elements are the outer elements on the left and top side of the chessboard which display coordinates.

With the following function otherCoord I am trying to make an evaluation where if the id numbers of the elements in array do not match the ID numbers in the array of arrayXYCoord then to push the elements into the array of arrayInnerCoord.

After I do this I will be using a function to assign ID's to the other squares of the chessboard followed by coordinates which can be toggled on and off.

I have tried various ways of doing this such as running two loops at a time and it ends up pushing the id's multiple times into an array and it just seemed really messy. I am looking for a clean way to do this with a simple comparison.

If possible, I would like to use a method from javascript.info/array-methods. Thank you

//Make a button to show or hide the x1 y1's and another button for all the x's and y's
//Center the divs x1 y1 on the sides and top
//

const body = document.querySelector('body');
const chessBoard = document.getElementById('chessBoard');
const toggleStatus = document.getElementById('toggleStatus');
const toggle = document.getElementById('toggle');
let array = []; //Array for chessboard squares (divs);
let arrayXYCoord = []; //Coord for outer X and Y Divs - These are ID numbers
let arrayInnerCoord = []; //Coords for those that are not in the center

//Creating Chessboard blocks (divs) and appending them to chessboard
function chessSquares() {
  let divID = 1;
  for (i = 0; i < 64; i++) {
    let div = document.createElement('div');
    div.className = 'chessDivs';
    div.id = divID;
    chessBoard.appendChild(div);
    array.push(div);
    divID++;
  }
}
chessSquares()

// Adding y Coordinate to side of board; classname is "yOuterCoordinates"
function yCoord() {
  let yOuterArray = [1, 9, 17, 25, 33, 41, 49, 57]
  for (b = 0; b < yOuterArray.length; b++) {
    const yCoord = document.getElementById(yOuterArray[b]);
    let yCoordinates = document.createElement('div');
    yCoordinates.textContent = 'y-' + yOuterArray[b];
    yCoordinates.className = 'yOuterCoordinates';
    yCoord.appendChild(yCoordinates);
    let yDivs = document.getElementById(yOuterArray[b]);
    arrayXYCoord.push(yDivs);
  }
}
yCoord();
// Adding x Coordinates to top of board; classname is "xOuterCoordinates"
function xCoord() {
  let xOuterArray = [1, 2, 3, 4, 5, 6, 7, 8]
  for (b = 0; b < xOuterArray.length; b++) {
    const xCoord = document.getElementById(xOuterArray[b]);
    let xCoordinates = document.createElement('div');
    xCoordinates.textContent = 'x-' + xOuterArray[b];
    xCoordinates.className = 'xOuterCoordinates';
    xCoord.appendChild(xCoordinates);
    let xDivs = document.getElementById(xOuterArray[b]);
    arrayXYCoord.push(xDivs);
  }
}
xCoord();
//Adding coordinates to rest of board with a class name of "otherCoords"
function otherCoord() {

  for (i = 0; i < array.length; i++) {

  }
}
otherCoord()
console.log(bodyArray);




const whiteChessPieces = [{}];
const blackChessPieces = [{}];

function chessPieces() {
  for (i = 0; i < 8; i++) {
    //White Pawns
    whiteChessPieces.push({ whitePawns: '&#9817' });
  }
  for (i = 0; i < 2; i++) {
    //White Knights
    whiteChessPieces.push({ whiteKnight: '&#9816' });
  }
  for (i = 0; i < 2; i++) {
    //White Bishops
    whiteChessPieces.push({ whiteBishop: '&#9815' });
    //
  }
  for (i = 0; i < 2; i++) {
    //White Rooks
    whiteChessPieces.push({ whiteRook: '&#9814' })
  }
  whiteChessPieces.push({ whiteQueen: '&#9813' }); //Queen
  whiteChessPieces.push({ whiteKing: '&#9812' }); //King

  for (i = 0; i < 8; i++) {
    //Black Pawns
    blackChessPieces.push({ blackPawn: '&#9823' })
  }
  for (i = 0; i < 2; i++) {
    //Black Knight
    blackChessPieces.push({ blackKnight: '&#9822' });
  }
  for (i = 0; i < 2; i++) {
    //Black Bishop
    blackChessPieces.push({ BlackBishop: '&#9821' });
  }
  for (i = 0; i < 2; i++) {
    //Black Rooks
    blackChessPieces.push({ blackRook: '&#9820' });
  }
  blackChessPieces.push({ blackQueen: '&#9819' });
  blackChessPieces.push({ blackKing: '&#9818' });
}
chessPieces();

body,
html {
  box-sizing: border-box;
}

body {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
}

#chessBoard {
  /* width: 32rem;
        height: 32rem; */
  background-color: rgb(65, 35, 1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 32rem;
  margin-top: 4rem;
  border: 5px ridge rgb(0, 0, 0)
}

.chessDivs {
  width: 4rem;
  height: 4rem;
  margin: 0;
  padding: 0;
  background-color: rgb(105, 76, 22);
  border: 2.5px groove rgb(126, 124, 124);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: inherit;
  position: relative;
}

.chessDivsNone {
  display: none;
}

#dualCoord {
  display: flex;
  flex-direction: column;
}

#toggle {
  position: absolute;
  top: 4rem;
  right: 2rem;
  height: auto;
  width: auto;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 1.25rem;
  border: 5px groove blue;
}

.toggleText {
  margin: 0;
  margin-top: 1rem;
}

#toggleStatus {
  margin: 1.5rem 1rem .75rem 1rem;
  font-size: 1.5rem;
  color: rgb(23, 212, 55);
}


.xOuterCoordinates {
  position: absolute;
  bottom: 150%;
}

.yOuterCoordinates {
  width: 2rem;
  position: absolute;
  right: 150%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chess Game</title>
  <style>

  </style>
</head>

<body>

  <div id="toggle">
    <p class="toggleText">Toggle<br>Coordinates</p>
    <p id="toggleStatus">Status - On</p>
  </div>

  <div id="chessBoard">
  </div>

</body>

<script>
// Moved to JavasScript pane
</script>

</html>

Answer 1

JavaScript is a language where things become easier and not as messy as Java. JavaScript has inbuilt functions for your need. You need not make nested loops like you do in Java while searching in arrays.

JavaScript has an inbuilt function called includes()

Suppose:

array1 = ['cat', 'bat', '2', 'rat', 'mat'];
array2 = ['hat', '2', 'elephant', 'cow', 'bat'];

Now:

array2.includes(array1[0]); //Returns false
array2.includes(array1[2]); //Returns true
array1.includes(array2[4]); //Returns true
array2.includes("elephant"); //Returns true

More information regarding to the array.includes() function can be found at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes or at https://www.w3schools.com/jsref/jsref_includes_array.asp

Hope it answers your question.