求助：实现使用两次后自动隐藏的Hint按钮解决方案

你的代码核心问题是计数器变量作用域错误——每次调用clicked()函数时，内部声明的y都会被重新初始化为0，导致点击后永远只能加到1，无法累计到2。另外还存在语法错误：if (y = 2)是赋值操作而非比较，第二段代码中的function Why()缺少函数体，逻辑完全失效。

修正后的完整代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <button id="hint">Click me for a hint</button>
  <div>剩余提示次数: <span id="counter">2</span></div>
  <input class="hide" id="select" type="text" placeholder="输入关卡号">
  <div id="demo"></div>
  <button class="buttonenter" id="buttonenter">Submit</button>
  <script src="script.js"></script>
</body>
</html>

CSS #

.hide {
  display: none;
}

.buttonenter {
  display: none;
}

JavaScript #

// 计数器变量放在函数外部，确保全局作用域保留计数
let hintCount = 0;
const maxHintTimes = 2;

// 用事件监听器绑定点击事件，替代内联onclick
document.getElementById('hint').addEventListener('click', clicked);
document.getElementById('buttonenter').addEventListener('click', enter);

function clicked() {
  const hintText = "are you sure you want to use a hint?";
  if (confirm(hintText)) {
    // 显示输入框和提交按钮
    document.getElementById("select").style.display = "block";
    document.getElementById("buttonenter").style.display = "block";
    
    // 累加计数并更新显示
    hintCount++;
    document.getElementById("counter").textContent = maxHintTimes - hintCount;
    
    // 达到最大使用次数后隐藏按钮
    if (hintCount === maxHintTimes) {
      document.getElementById("hint").style.display = "none";
    }
  }
}

function enter() {
  const x = document.getElementById("select").value;
  let resultText = "";
  
  // 用switch替代多分支else if，逻辑更清晰
  switch(x) {
    case "4":
      resultText = "c______l ____s";
      break;
    case "6":
      resultText = "pho__";
      break;
    case "7":
      resultText = "bottle, eyes";
      break;
    default:
      resultText = "That's not a level";
  }
  
  document.getElementById("demo").textContent = resultText;
  // 隐藏输入框和提交按钮
  document.getElementById("select").style.display = "none";
  document.getElementById("buttonenter").style.display = "none";
}

关键修改说明 #

• 作用域修正：将计数器hintCount定义在函数外部，每次点击都会保留之前的数值，不会被重置
• 语法错误修复：用===严格比较运算符替代赋值操作=，避免逻辑判断失效
• 代码优化：
  • 用addEventListener替代HTML内联onclick，代码更易维护
  • 用switch替代多分支else if，逻辑结构更清晰
  • 用textContent替代innerHTML，避免不必要的HTML解析，更安全
• 用户体验提升：添加剩余提示次数显示，让用户直观了解可用次数

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