无法实现换行及打字机效果的前端技术问题求助

1. 无打字效果版本的换行修复 #

原代码中直接在字符串内换行无法被HTML解析，需用<br>标签实现换行。同时调整行号排版逻辑，避免第一行前出现空行：

let lineNum = 1; // 初始化行号为1

function nextLineUntype(text){ 
  // 非第一行先添加换行
  if(lineNum > 1) {
    document.getElementById("game").innerHTML += "<br>";
  }
  document.getElementById("game").innerHTML += "[" + lineNum +"]" + text;
  lineNum ++;
}

2. 打字机效果的完整修复 #

原打字机函数存在三个核心问题：未调用内部typeWriter函数、行号重复添加到每个字符前、lineNum递增时机错误。修改后的代码如下：

function nextLine(text){
  typing(text, 50);
}

function typing (txt, speed){
  const gameEl = document.getElementById("game");
  const currentLineNum = lineNum; // 保存当前行号，避免异步导致行号混乱
  
  // 非第一行先添加换行
  if(currentLineNum > 1) {
    gameEl.innerHTML += "<br>";
  }
  // 先添加当前行的行号
  gameEl.innerHTML += "[" + currentLineNum +"]";
  
  let i = 0;
  function typeWriter() {
    if (i < txt.length) {
      gameEl.innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    } else {
      // 打字完成后再递增行号
      lineNum++;
    }
  }
  // 启动打字逻辑
  typeWriter();
}

完整可运行代码 #

<body style="background-color:black; color:white;"> <!-- 添加白色文字，确保黑色背景下可见 -->
  <p id="game"></p>
  <p><input type="text" id="enterspace"></p>
  <script>
    let lineNum = 1;

    function nextLineUntype(text){ 
      if(lineNum > 1) {
        document.getElementById("game").innerHTML += "<br>";
      }
      document.getElementById("game").innerHTML += "[" + lineNum +"]" + text;
      lineNum ++;
    }

    function nextLine(text){
      typing(text, 50);
    }

    function typing (txt, speed){
      const gameEl = document.getElementById("game");
      const currentLineNum = lineNum;
      
      if(currentLineNum > 1) {
        gameEl.innerHTML += "<br>";
      }
      gameEl.innerHTML += "[" + currentLineNum +"]";
      
      let i = 0;
      function typeWriter() {
        if (i < txt.length) {
          gameEl.innerHTML += txt.charAt(i);
          i++;
          setTimeout(typeWriter, speed);
        } else {
          lineNum++;
        }
      }
      typeWriter();
    }

    document.addEventListener("DOMContentLoaded", (event) => {
      nextLineUntype("WIP - V.0.001");
      nextLineUntype("Welcome To Saltmoss's Warriors Text Adventure!");
      nextLine("Press Enter To Continue");
    });
  </script>
</body>

关键修复点说明 #

• 换行逻辑：用HTML标准<br>标签替代字符串换行，确保页面正确解析换行效果
• 打字机启动：在typing函数内主动调用typeWriter()，触发打字动画
• 行号稳定性：保存当前行号快照，避免异步过程中行号提前递增导致的显示错误
• 文本可见性：为body添加color:white样式，解决黑色背景下文字不可见的问题

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