数字猜谜游戏点击按钮报Uncaught TypeError: guess is not a function求助

报错核心原因 #

你遇到的Uncaught TypeError: guess is not a function报错，是命名冲突导致的：浏览器会自动把页面中带id属性的DOM元素挂载到全局window对象上，你的按钮id设置成了guess，和你定义的guess()函数重名，函数被DOM元素覆盖，调用时自然会提示不是函数。

需要修改的3个问题 #

• 解决命名冲突：要么修改按钮id，要么修改函数名，这里选择把按钮id改成guessBtn
• 移除重复绑定：你同时用了HTML里的onclick="guess()"和JS里的addEventListener绑定点击事件，会导致每次点击触发两次函数，猜测次数错误扣减两次，删掉HTML里的onclick属性即可
• 修复逻辑bug：判断剩余次数的代码里误用了赋值运算符=，要改成相等判断===；另外最好把输入框的字符串值转成数字再比较，避免隐式转换出错；原随机数生成逻辑会产出0_{1000的数值，如果需要严格符合1}1000的范围可以调整生成规则。

修正后的完整代码 #

JS代码 #

// 变量加声明避免全局污染，调整后随机数范围为1~1000
const randomnum = Math.floor(Math.random() * 1000) + 1;
let tries = 10;

function guess() {
  // 输入内容转数字后再做比较
  const userInput = Number(document.getElementById("input").value);
  tries--;

  if (userInput === randomnum) {
    document.getElementById("input").select();
    document.getElementById("result").innerHTML = "猜对了";
  } else if (userInput < randomnum) {
    document.getElementById("input").select();
    document.getElementById("help").innerHTML = "太小了";
  } else if (userInput > randomnum) {
    document.getElementById("input").select();
    document.getElementById("help").innerHTML = "太大了";
  }

  if (tries === 0) {
    document.getElementById("input").select();
    document.getElementById("result").innerHTML = "你已经没有猜测次数了"
  }
}
document.getElementById("guessBtn").addEventListener("click", guess);

HTML代码 #

<section id="spiel">
  <h2>猜数字小游戏</h2>

  <p>程序会随机生成1到1000之间的整数，你需要在输入框中输入你猜测的数字，共有10次猜测机会。</p>

  <p id="help"></p>
  <input type="text" id="input" maxlength="4">
  <!-- 修改按钮id、移除onclick属性 -->
  <button type="button" id="guessBtn">确认</button>
  <p id="result"></p>

</section>

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