JavaScript猜数字应用guess()函数点击事件无法运行问题

现存问题点 #

你的代码存在多处语法错误、变量遗漏问题，会直接导致事件绑定失效、函数运行中断，具体问题如下：

• 变量缺失：startGame()函数中操作了stage1元素，但代码顶部没有声明获取stage1对应的DOM节点，运行到该行会抛出引用错误；若脚本执行时机早于DOM渲染，还会导致后续guess按钮的事件绑定逻辑直接中断
• 拼写错误：guess()函数中做类型转换时将Number错写为NUmber，函数执行到该行会直接抛出引用错误中断运行
• HTML字符串语法错误：游戏失败的提示代码中class="red缺少属性闭合双引号，字符串末尾多余了一个独立的双引号，会导致DOM渲染异常
• 变量未声明：remainingChances直接赋值没有通过let/const声明，会隐式创建全局变量，严格模式下会直接报错

修复后代码 #

首先补全缺失的stage1元素获取，修正所有拼写和语法错误，修复后的完整JS代码如下：

// 补全缺失的stage1元素获取
const stage1 = document.getElementById('stage1');
const stage2 = document.getElementById('stage2');
const maximuminput = document.getElementById('maximum');
const startbutton = document.getElementById('start');
const guessinput = document.getElementById('guess-number');
const guessbutton = document.getElementById('guess-button');
const chancesspan = document.getElementById('chances');

let maximumNumber, totalChances, targetNumber;

startbutton.addEventListener('click', startGame);
function startGame(){
  maximumNumber = Number(maximuminput.value);

  if(maximumNumber > 10) {
      targetNumber = Math.floor(Math.random() * (maximumNumber + 1));
      totalChances = Math.floor(Math.log2(maximumNumber)) + 1;
      chancesspan.textContent = totalChances;
      stage1.classList.toggle('hidden');
      stage2.classList.toggle('hidden');
  }else {
      const p = document.querySelector('#stage1 p');
      p.outerHTML = '<p class="red">عدد وارد شده باید بزرگتر از 10 باشد</p>'
  }
}

guessbutton.addEventListener('click', guess);

function guess(){
  // 修正Number拼写错误
  let yourguess = Number(guessinput.value);
  if(yourguess == targetNumber){
      stage2.innerHTML = '<p class="blue">تبریک شما موفق شدید</p>';
      return;

  }else if(yourguess > targetNumber) {
      const status = document.getElementById('status');
      status.innerHTML += `<span class="red">${yourguess}</span>`;
  }else {
      const status = document.getElementById('status');
      status.innerHTML += `<span class="red">${yourguess}</span>`;
  }

  // 补全变量声明
  let remainingChances = Number(chancesspan.textContent);
  remainingChances -- ;
  if(remainingChances > 0 ){
      chancesspan.textContent = remainingChances;
  }else {
      // 修正class属性引号错误，删除多余的末尾引号
      stage2.innerHTML = '<p class="red">!متاسفانه فرصت شما به پایان رسید</p>'
  }
}

额外注意 #

请确保你的<script>标签放在所有DOM元素的末尾（即</body>标签之前），如果放在<head>中，需要将DOM获取和事件绑定逻辑包裹在DOMContentLoaded事件回调中，否则会因为DOM未渲染完成导致获取元素为null，事件绑定失效。

内容的提问来源于stack exchange，提问作者Mmd.ary