自定义JavaScript修改指定ID段落文本的函数失效，如何修复？

你的函数无法工作，最常见的原因是DOM元素还未加载完成就调用了函数，此时document.getElementById会返回null，访问null.innerText会触发错误。另外，给函数加个空值判断能避免找不到元素时的报错，让代码更健壮。

以下是具体修复方式：

修复后的函数代码 #

function changeInnerText(id, text) {
  const place = document.getElementById(id);
  // 先判断元素是否存在，再修改文本
  if (place) {
    place.innerText = text;
  }
}

确保函数在DOM加载完成后调用 #

有两种常用方式：

方式1：监听DOM加载完成事件 #

把函数调用放在DOMContentLoaded事件回调里，确保所有DOM元素都已加载：

document.addEventListener('DOMContentLoaded', function() {
  // 示例：修改id为paragraph的段落文本
  changeInnerText('paragraph', '更新后的文本');
});

方式2：将脚本放在HTML末尾 #

把包含函数和调用代码的<script>标签放在</body>标签之前，此时DOM已经加载完毕，直接调用函数即可：

<p id="paragraph">text</p>

<script>
function changeInnerText(id, text) {
  const place = document.getElementById(id);
  if (place) {
    place.innerText = text;
  }
}

// 直接调用函数
changeInnerText('paragraph', '更新后的文本');
</script>
</body>

内容的提问来源于stack exchange，提问作者Vlad U