JavaScript猜数字游戏提交按钮仅可点击一次问题求助

问题原因 #

你使用gameBody.innerHTML += 提示内容的方式追加猜题结果，这个操作会先销毁gameBody下所有现有DOM元素，再把拼接后的HTML字符串重新渲染为新DOM。第一次点击按钮后，原来绑定了点击事件的guessbutton按钮被销毁，新渲染出来的按钮没有绑定任何事件，所以后续点击没有任何反应。

另外你在gameStart函数里编写的input标签属性存在语法错误：placeholder ="Enter your guess..." "min="1" 这里placeholder属性后多了一个多余的双引号，会导致min、max属性不生效。

修复方案 #

不要直接修改gameBody的innerHTML追加内容，单独创建提示元素后插入到DOM末尾，不会破坏已有的输入框、按钮和绑定的事件。

修正后的代码 #

JavaScript代码 #

const start = document.getElementById("start")
const description = document.getElementById("description")
const gameBody = document.getElementById("root")
let valaszokHTML

start.addEventListener("click", gameStart)

function gameStart() {
  // 修复input属性的多余引号问题
  gameBody.innerHTML = '<input type = "number"  placeholder ="Enter your guess..." min="1" max="1000" id="usernumber">' +
    '<button id="guessbutton">This is my guess!</button>'
  const guessSubmit = document.getElementById("guessbutton")
  guessSubmit.addEventListener("click", compareNumbers)
}

function compareNumbers() {
  let userNumber = Number(document.getElementById("usernumber").value)
  // 新增提示元素，不修改原有DOM
  const tipEle = document.createElement('h1')
  if (myNumber.szamom > userNumber) {
    tipEle.textContent = `Wrong! It's bigger than ${userNumber}`
  } else if (myNumber.szamom < userNumber) {
    tipEle.textContent = `Wrong! It's smaller than ${userNumber}`
  } else if (myNumber.szamom == userNumber) {
    // 猜对后直接替换内容，结束游戏
    gameBody.innerHTML = "<h1>Right! You won!</h1>"
    return
  }
  gameBody.appendChild(tipEle)
  // 可选：清空输入框方便下次输入
  document.getElementById("usernumber").value = ''
}

const myNumber = {
  szamom: Math.floor(Math.random() * 1000) + 1,
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>猜数字游戏</title>
</head>
<body>
  <div id="root">
    <div id="description">
      <h1> Try to guess the number between 1 and 1000!</h1>
    </div>
    <button id="start">Game start</button>
  </div>
  <script src="practice.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者veréb