// array
let player1gameboard2 = ["X", 1, 2, 3, 4, 5, 6]
function changePositionPlayer1Down(player1gameboard2) {
  // prints out array
  console.log(player1gameboard2)
  document.getElementById("player1_test").innerHTML = player1gameboard2
  // condition if array is less than 1. Normally goes to highest index. should just stay at lowest index
  if (player1gameboard2.indexOf("X") === 0) {
    player1gameboard2.splice(
      //future index of element
      0,
      // original element
      0,
      // how to get original element
      // [0] means it is an array
      // means 1 element
      player1gameboard2.splice(0, 1)[0]
    )
    // prints out new array
    document.getElementById("player1_test").innerHTML = player1gameboard2
  }
}

<!-- Array printed out on screen -->
<p id="player1_test"></p>
<!-- every time button clicked, indexed array goes down one space -->
<button onclick="changePositionPlayer1Down(player1gameboard2)">Go Down</button>

const moveElement = "X";
let player1gameboard2 = [0, 1, 2, moveElement, 4, 5, 6]
function changePositionPlayer1Down(arr) {
    console.log(arr)
    const fromIndex = arr.indexOf(moveElement);
    
    if (fromIndex === 0) {
        return;
    }
    // replace "X" at fromIndex - 1
    arr.splice(
        fromIndex - 1,
        0,
        // cut ["X"] out of array and get "X"
        arr.splice(fromIndex, 1)[0] // same and could replace as "X"
    )
    // update value of the number has been shifted
    arr[fromIndex]++;
    document.getElementById("player1_test").innerHTML = player1gameboard2
}