问尝试从JavaScript数组中删除JSON对象时收到错误消息

EN

console.log(celebArray[initialPicValue2].picture);

if (celebArray.length > 1) {
  // do something
}

if (celebArrayLength === 1) {
  $('button').hide()
  return alert("Congrats! Your Favorite Celeb is " + celebArray[0].name);
}

var arr = [1,2] // a list with the numbers of the buttons
arr.splice(e-1, 1) // we remove the one that was pressed
var other = arr[0] // the one left is the other one

var celebArray = [
    {
        name: "Tom Hanks",
        // picture: "assets/images/tomHanks.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/tomHanks.jpg"
    },
    {
        name: "Benedict Cumberbatch",
        // picture: "assets/images/benedictCumberbatch.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/benedictCumberbatch.jpg"
    },
    {
        name: "Charlize Theron",
        // picture: "assets/images/charlizeTheron.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/charlizeTheron.jpg"
    },
    {
        name: "Evangeline Lilly",
        // picture: "assets/images/evangelineLilly.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/evangelineLilly.jpg"
    },
    {
        name: "Katee Sackhoff",
        // picture: "assets/images/kateeSackhoff.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/kateeSackhoff.jpg"
    },
    {
        name: "Robert Downey Jr.",
        // picture: "assets/images/robertDowneyJr.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/robertDowneyJr.jpg"
    },
    {
        name: "Rose Leslie",
        // picture: "assets/images/roseLeslie.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/roseLeslie.jpg"
    },
    {
        name: "Denzel Washington",
        // picture: "assets/images/denzelWashington.jpg"
        picture: "https://jesberman.github.io/Celeb-Mash-Prototype/assets/images/denzelWashington.jpg"
    },
];

function picValues() {
  var initialPicValues = {}
  celebArrayLength = celebArray.length;
  initialPicValues[1] = Math.floor((Math.random() * celebArrayLength));
  var keys = Object.keys(celebArray)
  keys.splice(initialPicValues[1], 1)

  var rnd_2 = Math.floor((Math.random() * keys.length));
  initialPicValues[2] = keys[rnd_2]

  return initialPicValues
}

var celebArrayLength = celebArray.length;
var initialPicValues = picValues(celebArray)

function loadPics() {
  $("#picture1").css("background-image","url(" + celebArray[initialPicValues[1]].picture + ")");
  $("#picture2").css("background-image","url(" + celebArray[initialPicValues[2]].picture + ")");
}

loadPics();
console.log("Initial Array:");
console.log(celebArray);

function pressButton(e) {

  if (celebArrayLength > 1) {

    var arr = [1,2] // a list with the numbers of the buttons
    arr.splice(e-1, 1) // we remove the one that was pressed
    var other = arr[0] // the one left is the other one

    console.log("Initial Pic "+other+" Value");
    console.log(initialPicValues[other]);
    console.log("Celeb Being Removed");
    console.log(celebArray[initialPicValues[other]].picture);
    celebArray.splice(initialPicValues[other], 1);

    initialPicValues = picValues(celebArray)

  }

  if (celebArrayLength === 1) {
    $('button').hide()
    return alert("Congrats! Your Favorite Celeb is " + celebArray[0].name);
  }

  console.log("Celeb To Be Removed:")
  console.log(celebArray[initialPicValues[other]].picture);
  console.log('celebArrayLength', celebArrayLength)
  loadPics()

  console.log("Array After Button Press:");
  console.log(celebArray);

}

#main-div {
    padding-top: 50px;
    padding-right:10%; 
    padding-left: 10%; 
    background-color: gold; 
    width: 100%; 
    height: 700px;
}

#header-div {
    text-align: center; 
    background-color: green; 
    height: 100px; 
    width: 80%;
}

#left-div {
    display: inline-block; 
    background-color: red; 
    width: 40%; 
    height: 400px;
}

#picture1 {
    background-repeat: no-repeat; 
    width: 100%; 
    height: 300px;
}

#button1 {
    position: relative; 
    left: 40%;
}

#right-div {
    display: inline-block; 
    background-color: blue; 
    width: 40%; 
    height: 400px;
}

#picture2 {
    background-repeat: no-repeat; 
    width: 100%; 
    height: 300px;
}

#button2 {
    position: relative; 
    left: 40%;
}

<!DOCTYPE html>

<head>
    <title>
        Celeb Mash
    </title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://code.jquery.com/jquery.js"></script>
</head>

<body>
    <div id="main-div">
        <div id="header-div">
            <h2>
                Pick The Celeb You Like More
            </h2>
        </div>
        <div id="left-div">
            <div id="picture1">
            </div>
            <button id="button1" onclick="pressButton(1)">
                Submit
            </button>
        </div>
        <div id="right-div">
            <div id="picture2">
            </div>
            <button id="button2" onclick="pressButton(2)">
                Submit
            </button>
        </div>

    </div>
    <!-- <script src="assets/javascript/logic.js"> -->
    </script>
</body>

</html>