JS功能故障排查：输入数字与页面隐藏数字比对功能无法运行

我希望实现以下功能：在输入框中输入3个数字，点击按钮后判断输入的数字是否与页面上的“隐藏数字”（初始显示为白色，不可见）一致，后续还有其他JS操作，但当前代码无法正常运行，想请教代码缺失了什么导致功能失效？

以下是原代码存在的问题及对应的修复方式：

• window.onload 赋值错误：原代码直接执行了Ans()，导致页面加载时函数立即执行，但后续的a变量会在函数执行前获取空值。应改为赋值函数引用，而非执行函数。
• a 变量未实时更新：原代码仅在初始化时获取一次ans.innerHTML，后续生成新答案时a不会同步更新，需在Ans函数内更新a的值。
• 输入框取值错误：使用了no1.values，正确的input元素取值属性是value，应改为no1.value。
• 函数名冲突：click是浏览器全局内置函数，自定义函数使用该名称会导致冲突，需改为其他名称（如checkAnswer）。
• 赋值运算符错误：ans.style.color == "white"是比较操作，应改为赋值操作ans.style.color = "white"。
• 分数未同步到页面：counter++后未更新页面上的分数显示，需添加score.innerHTML = counter。
• 通过样式判断状态不可靠：CSS设置的颜色无法通过ans.style.color直接获取，建议用变量跟踪答案是否可见（如isAnswerVisible）。

HTML #

<div id="ans">
 <input type="number" id="no1" min="0" max="9">
 <input type="number" id="no2" min="0" max="9">
 <input type="number" id="no3" min="0" max="9">
</div>

<div id="btn">
  <input type="submit" value="Confirm" id="button" onclick="checkAnswer()"/>
</div>

<div>
  <p id="Numbers"></p>
</div>

<div>
  <p>Score: </p>
  <p id="Score"></p>
</div>

CSS #

#Numbers {
  color: #FFFFFF;
}

JavaScript #

let button = document.getElementById('button');
let no1 = document.getElementById('no1');
let no2 = document.getElementById('no2');
let no3 = document.getElementById('no3');
let ans = document.getElementById('Numbers');
let score = document.getElementById('Score');

let a = '';
let counter = 0;
let isAnswerVisible = false;

// 页面加载时初始化答案
window.onload = Ans;

function Ans() {
  const arr = ["012", "013", "014", "015", "016", "024", "025", "026", "027", "036", "037", "048"];
  const answerIndex = Math.floor(Math.random() * arr.length);
  a = arr[answerIndex];
  ans.innerHTML = a;
  ans.style.color = "#FFFFFF";
  isAnswerVisible = false;
}

// 初始化分数显示
score.innerHTML = counter;

function checkAnswer() {
  // 获取输入值并转为字符串，避免数字类型比对问题
  const input1 = no1.value.toString();
  const input2 = no2.value.toString();
  const input3 = no3.value.toString();

  if (input1 === a.substring(0,1) && input2 === a.substring(1,2) && input3 === a.substring(2)) {
    ans.style.color = "black";
    ans.innerHTML = "Congratulations";
    counter++;
    score.innerHTML = counter;
  } else {
    ans.style.color = "black";
    ans.innerHTML = "Sorry! You are wrong!";
  }
  isAnswerVisible = true;
  // 清空输入框
  no1.value = "";
  no2.value = "";
  no3.value = "";
}
  
window.addEventListener("mousedown", (e) => {
  // 点击非按钮区域时生成新答案（避免误触按钮）
  if (isAnswerVisible && e.target.id !== 'button') {
    Ans();
  }
});

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