下面是一个非常简单的函数,用于设置DOM元素的文本内容。
const display = (el, value) => {
el.textContent = value;
};
display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');
<span id="element1" />
<span id="element2" />
奇怪的是,当第二次调用该函数时,该函数将出错:
未捕获的类型错误:无法将属性“textcontent”设置为空
起初,我认为问题可能是由于第二个元素在执行时可能尚未加载,但:
-
脚本在
body
标记,因此应该已加载所有DOM元素。
-
只在第二个元素上调用函数,正确打印
Two
.
-
将呼叫替换为
display()
具有
console.log(document.getElementById('element1'))
和
console.log(document.getElementById('element2'))
成功地打印出这两个元素。
-
更改两个呼叫的顺序仍将只显示
One
,但未发生错误。
所以我被难住了。这个问题在stacksnippet和作为单独的HTML页面加载时都会出现。它同时出现在当前的火狐和Chrome中。
我错过了一些很明显的东西吗?有人能告诉我发生了什么事吗?
