JavaScript函数在第二次调用时无法获得对DOM元素的引用

时间:2018-06-21 02:35:48

标签: javascript html dom

下面是一个非常简单的函数,它将设置DOM元素的文本内容。

const display = (el, value) => {
  el.textContent = value;
};

display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');
<span id="element1" />
<span id="element2" />

奇怪的是,第二次调用该函数时,会出现以下错误:

  

未捕获的TypeError:无法将属性'textContent'设置为null

起初,我认为问题可能是由于第二个元素在执行时可能尚未加载而引起的,但是:

  • 该脚本在body标记的末尾处内联,因此所有DOM元素都应该已加载。
  • 仅在第二个元素上调用该函数才能正确打印Two
  • display()console.log(document.getElementById('element1'))替换对console.log(document.getElementById('element2'))的调用会成功打印出两个元素。
  • 更改两个呼叫的顺序仍将仅显示One,但不会发生错误。

所以我很困惑。该问题在堆栈片段中以及在作为单独的HTML页面加载时均出现。它在当前的Firefox和Chrome中都出现。

我在这里错过了很明显的东西吗?谁能告诉我发生了什么事?

1 个答案:

答案 0 :(得分:2)

const display = (el, value) => {
  el.textContent = value;
};

display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');
<span id="element1"></span>
<span id="element2"></span>

如果您更正了span标签,那么它将正常工作。因此您可以正确关闭span标签。