JavaScript while循环仅执行一次问题求助

问题根源 #

你的while循环仅执行一次的核心原因有两点：

1. 未动态更新查找索引：result 在循环外仅计算一次，循环内始终使用同一个索引值，重复执行相同操作，视觉上无变化，误以为只执行一次。
2. 错误分支直接终止循环：当字母不存在时，else 分支里的 break 直接结束循环，仅执行一次就停止。

修复后的代码 #

下面是调整后的代码，实现了遍历查找所有匹配字母+3次错误尝试限制的逻辑，确保while循环正常执行直到条件完成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Find Letter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Find letter:</p>

  <form id="chk" method="post">
    <label for="scen">Sentence</label>
    <p id='scen'>Hello my friend</p>
    <br><br>
    <label for="letter">Enter the letter</label>
    <input type="text" name="letter" id="letter" placeholder="Enter a letter" min="1" maxlength="1">
    <br>
    <button type="button" onClick="myFunction()">Submit</button>
  </form>

  <p id="demo"></p>
  <p id="demo2"></p>
  <p id="demo3"></p>

  <script>
    function myFunction() {
      // 重置所有结果区域，避免多次点击的内容累加
      document.getElementById('demo').innerHTML = '';
      document.getElementById('demo2').innerHTML = '';
      document.getElementById('demo3').innerHTML = '';

      const scen = document.getElementById('scen').innerHTML;
      const letter = document.getElementById('letter').value.trim();
      const errMsg = "The letter does not exist in the sentence";
      const sentenceLength = scen.length;
      let remainingChances = 3;
      let currentIndex = -1;

      // 渲染句子的每个字符为独立span，方便后续高亮
      for(let i = 0; i < sentenceLength; i++) {
        document.getElementById('demo').innerHTML += `<span id="char-${i}">${scen[i]}</span>`;
      }

      // 循环遍历句子，查找所有匹配字母或用完机会
      while(remainingChances > 0) {
        // 从当前索引的下一位开始查找，避免重复匹配同一个位置
        currentIndex = scen.indexOf(letter, currentIndex + 1);
        
        if(currentIndex >= 0) {
          // 显示找到的字母和索引
          document.getElementById('demo3').innerHTML += `Found '${letter}' at index: ${currentIndex}<br>`;
          // 高亮找到的字母
          document.getElementById(`char-${currentIndex}`).style.color = 'red';
        } else {
          // 未找到时减少机会，更新提示
          remainingChances--;
          document.getElementById('demo2').innerHTML = `${errMsg} | Remaining chances: ${remainingChances}`;
        }

        // 遍历完整个句子后终止循环
        if(currentIndex === sentenceLength - 1) break;
      }

      // 用完所有机会后的提示
      if(remainingChances === 0) {
        window.alert('Game over');
      }
    }
  </script>
</body>
</html>

关键修改点 #

• 重置DOM内容：每次点击按钮先清空结果区域，避免之前的操作残留。
• 动态更新查找索引：使用scen.indexOf(letter, currentIndex + 1)，每次从上次找到的位置的下一位开始查找，实现遍历所有匹配项。
• 移除错误分支的break：改为递减机会次数，直到机会用完再终止循环，保证循环正常执行。
• 添加输入限制：给字母输入框加maxlength="1"，确保用户仅输入单个字母。
• 视觉反馈优化：高亮找到的字母，让结果更直观。

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