猜数字项目if-else逻辑异常求助：匹配提示错误，调整后判断失效

核心问题 #

• 错误的输入值访问: guess 已经是输入框的字符串值，你却尝试访问 guess.value，这会得到 undefined，导致条件永远不成立。
• 类型不匹配: 输入框的值是字符串类型，而 random 是数字类型。使用严格相等运算符 === 时，字符串和数字永远不会相等，所以正确的猜测也会被判定为错误。
• 重复绑定事件: 按钮同时设置了 onclick="play()" 属性和 JS 中的 addEventListener，会导致函数被执行两次。

修复后的代码 #

JavaScript 代码 #

function play(){
  let random = Math.floor(Math.random() * 3 + 1);
  // 将输入值转换为数字类型
  let guess = Number(document.querySelector('#myguess').value);
  let pick = document.querySelector('#pick');

  if (guess === random){
    pick.innerText = `你选了 ${guess}，正确数字是 ${random}。恭喜你，猜对了！`;
  } else {
    pick.innerText = `你选了 ${guess}，正确数字是 ${random}。很遗憾，猜错了！抱歉 :(`;
  }
}

// 只保留一种事件绑定方式即可
document.getElementById('btn').addEventListener("click", play);

HTML 代码（修改按钮部分） #

<button id="btn">Submit</button>

修复说明 #

1. 修正输入值获取: 移除了多余的 .value，并使用 Number() 将输入的字符串转换为数字，确保和 random 的类型一致，严格相等判断才能正常工作。
2. 移除重复事件绑定: 删除了按钮上的 onclick 属性，避免函数重复执行。
3. 优化字符串拼接: 使用模板字符串 ` ` 让输出文本更易读。

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