JS打字机效果输出含undefined问题排查 技术术语及代码保留

undefined出现的直接原因是你使用document.write(typeWriter())调用打字机函数：

• typeWriter函数没有显式定义返回值，JavaScript中这类函数执行后默认返回undefined
• document.write会将传入的参数内容直接写入HTML文档，所以就把函数返回的undefined写在了输出文本的最前面

此外你将脚本放在<p id="demo">标签内部的写法也不规范，执行脚本时目标DOM节点还未完全解析，也可能引发其他渲染异常。

删掉document.write包裹逻辑，等DOM节点加载完成后直接调用typeWriter函数即可，修改后的完整代码如下：

<div class="announce">
  <p id="demo"></p>
</div>

<script>
var i = 0;
var txt = '圣诞家庭礼拜——12月19日周日上午11:45。欢迎来到贝萨尼福音教堂，了解圣诞节的真正意义。';
var speed = 50; 

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
// 直接调用函数启动打字效果
typeWriter();
</script>

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