如何实现输入错误答案后禁止显示网页正文内容？

问题说明 #

你原有代码存在3个核心问题：

• 第一题的判断逻辑错误：q1 == "John" || "JOHN" 写法不符合JS语法规则，第二个"JOHN"会被判定为恒真，导致任意输入都能通过第一题验证
• 没有控制body显隐：页面默认会直接展示body内容，和你的需求不符
• 缺少答错分支处理：答错后没有中断流程，也没有错误提示

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Special-Wishes </title>
<style>
/* 默认隐藏body，验证通过后再展示 */
body {
  display: none;
}
</style>
<script>
// 第一题验证
let q1 = prompt("what is your name...?");
// 修正判断逻辑，也可以写成 q1?.toLowerCase() === 'john' 兼容更多大小写情况
if(q1 === "John" || q1 === "JOHN"){
  // 第一题答对进入第二题
  let q2 = prompt("what's your nick name...?"); 
  if(q2 === "blabla"){
    alert("welcome to the page");
    // 全部验证通过，展示body
    document.body.style.display = 'block';
  } else {
    // 第二题答错提示
    alert("昵称错误，无法访问页面");
  }
} else {
  // 第一题答错提示
  alert("姓名错误，无法访问页面");
}
</script>
</head>
<body>
<h1>My body section</h1>
</body>
</html>

补充优化建议 #

如果需要不区分大小写验证答案，可以把判断条件替换为转统一大小写的写法，比如验证姓名的条件可以改成q1?.trim().toLowerCase() === 'john'，这样用户输入john、John、JOHN都能识别通过，同时还加了.trim()去掉用户不小心输入的前后空格，使用体验更好。

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