javascript - 从javascript对象错误创建表的函数

Question

我进行了一些搜索，并将我的猫用作橡皮鸭，但我真的坚持创建一个函数，该函数将对象和表 ID 作为参数来吐出一个简单的表。

我正在使用基本的 javascript，因为我是通过深入学习自学的。您可以在 http://oxygen.meddleso.me/ 查看完整代码。但我会在这里发布我认为最相关的内容:

//html

<div id="inventoryTableDiv">
    <table>
      <tbody id='invtbody'></tbody>
    </table>
</div>

//main.js

var inventory = [{ice: 10}, {metal: 10}];

function refreshValues() {
  /* lots of other lines snipped */
  generateTable(inventory, invtbody);
}

function generateTable(array, tablebodyid) {
  var tablebody = document.getElementById(tablebodyid);
  var tr = "<tr>";
  for (var i = 0; i < array.length; i++) {
    obj = array[i]
    for (var x in obj) {
      console.log(x + " : " + obj[x]);
      tr += "<td>" + x + "</td>" + "<td>" + obj[x] + "</td>" + "</tr>";
      console.log(tr);
      tablebody.innerHTML = tr;
    }
  }
}

generateTable 基于这个答案:Create HTML table from JavaScript object

它吐出第一个日志，“ice : 10”和第一组 tr:

"<tr><td>ice</td><td>10</td></tr>" 

但是我得到了错误:

Cannot set property 'innerHTML' of null

如果我只是将 console.log 设为“tr”，它怎么可能为空？任何帮助将不胜感激，我希望这不是一个糟糕的 SO 问题。

Answer 1

generateTable(inventory, invtbody);

在上面的行中，invtbody 没有被初始化。您需要改用 "invtbody"。

您应该将行更改为:

generateTable(inventory, "invtbody");

查看完整示例:

var inventory = [{ice: 10}, {metal: 10}];

function refreshValues() {
  /* lots of other lines snipped */
  generateTable(inventory, 'invtbody');
}

function generateTable(array, tablebodyid) {
  var tablebody = document.getElementById(tablebodyid);
  var tr = "<tr>";
  for (var i = 0; i < array.length; i++) {
    obj = array[i]
    for (var x in obj) {
      console.log(x + " : " + obj[x]);
      tr += "<td>" + x + "</td>" + "<td>" + obj[x] + "</td>" + "</tr>";
      console.log(tr);
      tablebody.innerHTML = tr;
    }
  }
}

refreshValues();

<div id="inventoryTableDiv">
    <table>
      <tbody id='invtbody'></tbody>
    </table>
</div>