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

Stack Overflow用户

提问于 2019-07-18 22:24:00

回答 1查看 88关注 0票数 1

因此，我正在尝试构建一个相对简单的应用程序，它可以接收8个预先确定的名人，一次随机显示两个，并允许用户选择他们喜欢的，直到只剩下一个。我已经设法让JavaScript端的几乎所有东西都能正常工作，但偶尔我会收到一条可能会使应用程序崩溃的错误消息，而我不知道如何修复它。我真的很感谢社区能提供的任何帮助。

我已经检查了代码，寻找可能导致错误的逻辑问题，并尝试使用console.logs来识别它，但错误似乎阻止了console.logs本身在它发生时显示。

您可以在以下位置找到GitHub存储库：

https://github.com/jesberman/Celeb-Mash-Prototype

和活动站点(有错误)在这里：

https://jesberman.github.io/Celeb-Mash-Prototype/

代码的一个重要部分被组织为一系列if语句，我将在下面显示这些语句：

if(initialPicValue1 === initialPicValue2 && initialPicValue2 === celebArrayLength){
    initialPicValue2 -= 1;
}
if (initialPicValue1 === initialPicValue2){
    initialPicValue2 += 1;
}
if(initialPicValue1 === initialPicValue2 && initialPicValue1 === 0){
    initialPicValue2 += 1;
}
if (celebArrayLength === 1){
    return alert("Congrats! Your Favorite Celeb is " + celebArray[0].name);
}

我希望干净地遍历数组中的所有对象，没有任何问题，直到只剩下一个对象。但是，我有时会随机得到以下错误：

未捕获图片:无法在HTMLButtonElement.onclick (index.html:21)的pressButton1 (logic.js:128)读取未定义的属性“”picture“”

javascript

jquery

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-18 22:40:47

我可以看到你在这一行得到一个错误：

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

问题是您有一个名人数组，celebArray，当您单击其中一个按钮时，您正在访问该数组中的一个索引。当数组中只剩下一个名人时，就会发生错误，它试图访问一个不存在的索引。因此，为了避免该错误，您必须在if (celebArrayLength === 1)之前获取pressButton函数中的第一个代码块，并将其放入以下if语句中：

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

然后，当它运行if (celebArrayLength === 1)并发现只剩下一个名人时，您可以通过执行以下操作来隐藏按钮，因为现在游戏结束了。

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

在你的代码中，每个按钮都有一个函数，但我简化了它，所以现在有一个函数，对两个按钮都运行，你传入按钮的编号，比如<button id="button1" onclick="pressButton(1)">，然后你就有了一个像这样的function pressButton(e)函数。

因此，在该函数中，在变量e中有按钮的编号，您可以通过从数组[1,2]中删除e，然后使用剩余的编号来获得另一个按钮的编号：

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>