从 HTML 输入 "undefined" 发送的对象属性

Question

我是编码初学者。我试图在 SO 上找到类似的问题，但没有正确的结果。

我正在编写代码，其中 HTML 表单将其值发送到对象的属性，然后我想使用 innerHTML 方法将其打印在文档中。我将对象保存在数组中，这样我就可以操作它们。

当我向我的数组添加一维时出现了一些问题（下面代码中的 arr[i][j] - 将进一步需要第二维） - 然后对象的属性在打印时更改为 "undefined"。我应该怎么做才能访问数组第二维中的对象属性（仅使用 JS）？这是我的 JS 代码：

var pro = 0;
var ctg = 1;
var arr = new Array(ctg);
arr[0] = new Array(pro)

function AddProduct() {
  var n = document.getElementById('name').value;
  var p = document.getElementById('price').value;
  pro++;
  for (i = arr[0].length; i < pro; i++) {
    arr[0].push([{
      name: n,
      price: p
    }]);
  }
  var content = '';
  for (i = 0; i < arr.length; i++) {
    for (j in arr[i]) {
      content += arr[i][j].name + ' price is ' + arr[i][j].price + '<br>';
    }
  }
  document.getElementById('p').innerHTML = content;
};

和 HTML 在 body:

<p id="p"></p>
<input type="text" id="name" placeholder="name">
<br>
<input type="text" id="price" placeholder="price">
<br>
<input type="button" value="OK" onclick=A ddProduct()>

Answer 1

尝试替换

onclick="AddProduct()"

对于

onclick=A ddProduct()

在html；并在

添加 [0]

content += arr[i][j][0].name + ' price is ' + arr[i][j][0].price + '<br>';

对于

content += arr[i][j].name + ' price is ' + arr[i][j].price + '<br>';

因为您首先将包含对象的数组推送到 arr for 循环。要引用数组的索引，请使用括号表示法在 arr

中的数组的索引 0 处检索对象

var pro = 0;
var ctg = 1;
var arr = new Array(ctg);
arr[0] = new Array(pro)

function AddProduct() {
  var n = document.getElementById('name').value;
  var p = document.getElementById('price').value;
  pro++;
  for (i = arr[0].length; i < pro; i++) {
    arr[0].push([{
      name: n,
      price: p
    }]);
  }
  var content = '';
  for (i = 0; i < arr.length; i++) {
    for (j in arr[i]) {  
      content += arr[i][j][0].name + ' price is ' + arr[i][j][0].price + '<br>';
    }
  }
  document.getElementById('p').innerHTML = content;
};

<p id="p"></p>
<input type="text" id="name" placeholder="name">
<br>
<input type="text" id="price" placeholder="price">
<br>
<input type="button" value="OK" onclick="AddProduct()">

从 HTML 输入 "undefined" 发送的对象属性

Object property sent from HTML input "undefined"

html

javascript

object

undefined

从 HTML 输入 "undefined" 发送的对象 属性

Object property sent from HTML input "undefined"

html

javascript

object

undefined

从 HTML 输入 "undefined" 发送的对象属性