时间戳

首页 > 解决方案 > 控制台显示未捕获的类型错误

javascript - 控制台显示未捕获的类型错误

问题描述

未捕获的类型错误：无法在 HTMLDivElement 的 XMLHttpRequest.xhttp.onreadystatechange (main.js:36) 处读取未定义的属性“6”。

我正在开发一个小游戏来学习和练习 JavaScript，我想获取存储在 json 文件中的信息，以从我显然使用的对象数组的属性中获取信息：arrayOfObjects[index].propertyOfObject，在我的代码中firstNShape.innerHTML = firstShape[randomFirstShape];是工作正常，但我收到错误：

未捕获的类型错误：无法在 HTMLDivElement 的 XMLHttpRequest.xhttp.onreadystatechange (main.js:36) 处读取未定义的属性“6”。

在浏览器的控制台中，我知道错误是什么意思，但我不明白为什么控制台显示“无法读取属性 '6'”，而 6 它是索引，而不是属性，属性是名称，我是做错了什么？

这是我的代码：

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var cardsInfo = JSON.parse(xhttp.responseText);
    }

    for (let i = 0; i < 2; i++) {
      //Choose a random value for card
      let randomFirstValue = Math.floor(Math.random() * 13);
      let randomFirstShape = Math.floor(Math.random() * 4);
      let firstShape = ["♥&quot;, "♦&quot;, "♣&quot;, "♠&quot;];

      //create the card
      let firstCard = document.createElement("div");
      firstCard.classList.add("card");
      firstCard.classList.add("cardDisplay");

      //Add value to the card
      let firstNValue = document.createElement("p");
      firstNValue.innerHTML = cardsInfo[randomFirstValue].name;
      firstCard.appendChild(firstNValue);

      //Add shape to the card
      let firstNShape = document.createElement("p");
      firstNShape.innerHTML = firstShape[randomFirstShape];
      firstCard.appendChild(firstNShape);
      //Append card to the card container
      cardContainer.appendChild(firstCard);
    }
}

这是我的 JSON 文件，它很简单，但我只是为了学习和练习 JSON 和 JS。

[
  {
    "name": "A",
    "value": 1,
    "value2": 11
  },
  {
    "name": "2",
    "value": 2
  },
  {
    "name": "3",
    "value": 3
  },
  {
    "name": "4",
    "value": 4
  },
  {
    "name": "5",
    "value": 5
  },
  {
    "name": "6",
    "value": 6
  },
  {
    "name": "7",
    "value": 7
  },
  {
    "name": "8",
    "value": 8
  },
  {
    "name": "9",
    "value": 9
  },
  {
    "name": "10",
    "value": 10
  },
  {
    "name": "J",
    "value": 10
  },
  {
    "name": "Q",
    "value": 10
  },
  {
    "name": "K",
    "value": 10
  }
]

标签： javascripttypeerrorjavascript-objectsgoogle-chrome-console

解决方案

我在 Jazz 的帮助下解决了，我所做的只是将所有逻辑放在 if 语句中，因为如果它在外面，即使条件未完成，它也会运行，我知道这很简单，但我是新手。

推荐阅读