输入‘plz’时显示div功能失效，求排查代码错误

你的代码存在三个核心问题，导致功能无法实现：

• 死循环阻塞主线程：while(true)是无限死循环，会直接卡死浏览器主线程，页面根本无法响应输入操作。而且原生JavaScript并没有内置sleep函数，这种轮询方式本身就是错误的。
• DOM元素选择错误：你给div设置的是classboxR，但代码里用document.getElementById("boxR")获取元素——getElementById只能匹配带id属性的元素，根本找不到目标div。
• 样式修改语法错误：设置元素可见性需要通过style属性，且visible是字符串必须加引号，正确写法是element.style.visibility = "visible"，你漏了style属性，也没给visible加引号。

修正后的代码 #

推荐使用input事件监听来实现，这种方式高效且不会阻塞线程：

<html>
  <style>
    .boxR{
      width: 350px;
      height: 350px;
      background-color:black;
      color:red;
      font-size:100px;
      font-weight:700;
      visibility:hidden;
    }
  </style>
  <body>
    <center>
      <br>
      <!-- 给div添加id属性，方便获取 -->
      <div id="boxR" class="boxR"><br>hello</div>
      <input id="test">
    </center>
    <script>
      // 获取输入框和目标div
      const input = document.getElementById("test");
      const box = document.getElementById("boxR");
      
      // 监听输入框的内容变化
      input.addEventListener("input", function() {
        // 匹配到"plz"时显示div，否则隐藏
        box.style.visibility = this.value === "plz" ? "visible" : "hidden";
      });
    </script>
  </body>
</html>

关键说明 #

用input事件监听用户输入，只有当输入框内容变化时才会触发判断，相比轮询更节省资源，也不会出现页面卡死的情况。

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