自学JS提取表单数据实现猜数字游戏运行异常求助

你的代码存在4处刚接触JS DOM操作时非常容易踩的基础遗漏，直接导致脚本无法正常运行：

1. 脚本执行时机完全错误 #

当前的判断逻辑在页面刚加载完成的瞬间就会执行，此时用户还没有在输入框输入任何内容，取到的userGuess永远是空值。更关键的是，代码没有绑定任何用户交互事件——哪怕用户后续在输入框敲完数字、点了提交按钮，也根本不会触发判断逻辑。

2. 未拦截表单的默认提交行为 #

你用的是原生表单的submit类型按钮，点击后浏览器会默认触发页面刷新操作，所有临时输入、页面状态都会被清空，就算逻辑跑通了，也留不住判断结果。

3. 依赖的工具函数未实现 #

你在代码里调用了writeMessage方法，用来往状态区域写入提示文字，但从头到尾没有写这个函数的具体逻辑。就算前面的执行时机、事件绑定都做对了，调用不存在的方法也会直接抛出报错，中断整个脚本的运行。

4. 数据类型不统一的隐患 #

从input元素取到的value属性永远是字符串类型，哪怕用户输入的是纯数字，拿到的也是字符串格式的数字。虽然用==松散比较暂时能兼容相等的判断，但涉及大小对比时，隐式类型转换很容易引发不符合预期的结果，需要显式把输入值转成数字类型。 #

可直接运行的核心逻辑参考 #

// 固定目标猜数
const targetNum = 6;
// 补上缺失的writeMessage工具函数
function writeMessage(elementId, content) {
  document.getElementById(elementId).innerHTML = content;
}
// 给表单绑定提交监听事件
document.querySelector('form').addEventListener('submit', (event) => {
  // 阻止表单默认的页面刷新行为
  event.preventDefault();
  // 实时获取用户输入，显式转为数字类型
  const userGuess = Number(document.getElementById('number').value);
  // 分支判断
  if (userGuess === targetNum) {
    writeMessage('statusArea', '<p>你猜中我设定的数字啦！</p>');
  } else if (userGuess > targetNum) {
    writeMessage('statusArea', '<p>不对哦，猜大了，再试试！</p>');
  } else if (userGuess < targetNum) {
    writeMessage('statusArea', '<p>不对哦，猜小了，再试试！</p>');
  }
  // 判断完成后清空输入框，方便下次输入
  document.getElementById('number').value = '';
})

另外有个小细节：你之前写的提示文字外层多嵌套了一层双引号，渲染到页面上会在文字前后显示多余的引号，去掉多余嵌套的引号就能正常展示了。

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