getElementById 在 Javascript 页面构建中返回 null

Question

我用 JavaScript 创建了结构。我不使用html。 我有一个创建结构并返回根窗格的函数。

function createEmptyChartPane (chartId) { 
  let divelem = document.createElement('div');
  let elem = document.createElement('textarea');

  elem.id = "chartdescr" + chartId;
  elem.rows = 6;
  elem.cols = 80;
  divelem.append(elem);

  // ...some other code, other elements

  return divelem
}

该函数是从另一个函数调用的。它循环遍历元素并创建它们。调用前一个函数后，它尝试设置元素的值。但它失败了，因为 getElementById 返回 null。

function createChartPanels () {

  let pane = document.createElement("div");

  // ... some other code
  for (let i; i < charts.length; i++) {
    pane.append(createEmptyChartPane(charts[i].id));

    let elem = document.getElementById("chartdescr" + charts[i].id);  // this returns null
    elem.value = charts[i].description;

    // ... setting value to other elements
  }
  return pane
}

除了值设置之外，这些功能还可以正常工作并创建图形元素。

如何避免空值？

Answer 1

问题是您从未将

pane

附加到文档中，因此

document.getElementById()

找不到它。

但是首先不需要调用

document.getElementById()

，因为

createEmptyChartPane()

返回元素。您可以将其分配给

elem

变量。

function createChartPanels () {

  let pane = document.createElement("div");

  // ... some other code
  for (let i; i < charts.length; i++) {
    let elem = createEmptyChartPane(charts[i].id)
    pane.append(elem);
    elem.value = charts[i].description;

    // ... setting value to other elements
  }
  return pane
}