时间戳

首页 > 解决方案 > 动态网页在检索对象属性时显示未捕获的错误。如何正确地做到这一点？

javascript - 动态网页在检索对象属性时显示未捕获的错误。如何正确地做到这一点？

问题描述

我创建了 2 个 JavaScript 文件以在 HTML 中动态显示数据。一个 JavaScript 文件 data.js 有一个对象数组（比如说目录），另一个 JavaScript 文件（function.js）有一个加载这些对象的函数，然后创建 HTML 元素并在 HTML 页面上显示项目（目录）。

控制台向我显示名称、价格（属性）错误上未捕获的错误articleName.innerText = catalog[i].name;`我不明白为什么会发生此错误？

请指导我如何解决这个问题。

错误详情

//function.js
function func() {
  var articles = document.getElementById("content");
  var catalog = catalogArray;
  for (var i = 0; i <= catalog.length; i++) {
    var article = document.createElement("div");
    article.setAttribute("class", "addClass class2 class3");
    var articleName = document.createElement("h2");
    articleName.setAttribute("class", "heading class2 class3");
    articleName.innerText = catalog[i].name;
    article.appendChild(articleName);
    var articleDecs = document.createElement("div");
    articleDecs.setAttribute("class", "border class2 class3");
    articleDecs.innerText = catalog[i].desc;
    article.appendChild(articleDecs);
    var articlePrice = document.createElement("div");
    articlePrice.setAttribute("class", "border class2 class3");
    articlePrice.innerText = catalog[i].price + " Dh";
    article.appendChild(articlePrice);
    articles.appendChild(article);
  }
}

// data.js
var catalogArray = [{
    code: 100,
    name: "Learn JS",
    desc: "To make your web paged dynamic",
    price: 150,
    image: "./images/100Tshirt.jpg"
  },
  {
    code: 101,
    name: "T Shirt",
    desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
    price: 0,
    image: "./images/101Tshirt.jpg"
  },

  {
    code: 102,
    name: "T Shirt 2",
    desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
    price: 0,
    image: "./images/102Tshirt.jpg"
  }
];
.addClass {
  font-size: 100px;
  color: grey;
  background-color: blue;
  border-style: 2px solid yellow;
}

.heading {
  color: green;
}

.border {
  border: 1px solid grey;
}

.imgclass {
  height: 300px;
  width: 200px;
}
<body onload="func()">
  <section id="content">
  </section>

</body>

标签： javascripthtmlcss

解决方案

您正在尝试迭代太多次，并且需要考虑从零开始的数组：

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

这应该是：

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

演示：

//function.js
// data.js
var catalogArray = [{
    code: 100,
    name: "Learn JS",
    desc: "To make your web paged dynamic",
    price: 150,
    image: "./images/100Tshirt.jpg"
  },
  {
    code: 101,
    name: "T Shirt",
    desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
    price: 0,
    image: "./images/101Tshirt.jpg"
  },

  {
    code: 102,
    name: "T Shirt 2",
    desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
    price: 0,
    image: "./images/102Tshirt.jpg"
  }
];

function func() {
  var articles = document.getElementById("content");
  var catalog = catalogArray;
  for (var i = 0; i < catalog.length; i++) {
    console.info(catalog[i]);
  
    var article = document.createElement("div");
    article.setAttribute("class", "addClass class2 class3");
    var articleName = document.createElement("h2");
    articleName.setAttribute("class", "heading class2 class3");
    articleName.innerText = catalog[i].name;
    article.appendChild(articleName);
    var articleDecs = document.createElement("div");
    articleDecs.setAttribute("class", "border class2 class3");
    articleDecs.innerText = catalog[i].desc;
    article.appendChild(articleDecs);
    var articlePrice = document.createElement("div");
    articlePrice.setAttribute("class", "border class2 class3");
    articlePrice.innerText = catalog[i].price + " Dh";
    article.appendChild(articlePrice);
    articles.appendChild(article);
  }
}
.addClass {
  font-size: 100px;
  color: grey;
  background-color: blue;
  border-style: 2px solid yellow;
}

.heading {
  color: green;
}

.border {
  border: 1px solid grey;
}

.imgclass {
  height: 300px;
  width: 200px;
}
<body onload="func()">
  <section id="content">
  </section>

</body>

推荐阅读