为随机数学反机器人验证码添加事件监听器 正确答题自动显示注册按钮

事件选择结论 #

优先使用 onkeyup 事件，原因如下：

• onkeydown 是按键按下瞬间触发，此时输入框的value还未完成更新，你获取到的是用户按下当前按键之前的旧值，会导致判断逻辑滞后一个字符
• onkeyup 是按键松开后触发，此时输入框的value已经完成更新，刚好能拿到用户输入的最新值，完全匹配你自动判断的需求
  如果需要兼容用户粘贴答案的场景，还可以额外绑定 input 事件，覆盖所有输入场景。

代码修复方案 #

你原有代码有两个需要调整的问题：

1. 没有给答案输入框绑定事件监听，所以校验的fire函数不会自动触发
2. 答案对比时类型不匹配：qanswer是数字类型，用户输入的uanswer是字符串类型，用===永远不会匹配成功

修改后的JS代码 #

var minimum = 1;
var maximum = 10;
var int1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var int2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById('question').innerHTML = int1 + " + " + int2;
var qanswer = String(int1 + int2); // 转成字符串，和输入值类型统一

const submitBtn = document.getElementsByClassName('Button Button--primary Button--block')[0];
submitBtn.style.visibility = 'hidden';

// 绑定keyup事件，输入时自动触发校验
document.getElementById('answer').addEventListener('keyup', fire);

function fire() {
  var uanswer = document.getElementById('answer').value.trim(); // 去掉首尾空格容错
  if (uanswer === qanswer) {
    submitBtn.style.visibility = 'visible';
  }
}

注意：原有代码else分支的alert逻辑建议删除，用户输入过程中未完成输入时会频繁弹出错误提示，严重影响使用体验。如果需要错误提示，可以在输入框旁加静态文字提示，不用弹窗打断用户输入。

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