根据标题，我的目标是跟踪在游戏中所做的尝试。
这是我到目前为止的代码:
null
let randomNumber = Math.floor(Math.random() * 30) + 1
let result = document.querySelector(".result")
let attempt = document.querySelector(".attempt")
let button = document.getElementById("button")
let guess = document.getElementById("guess")
button.addEventListener("click", checkGuess)
function checkGuess() {
let guessValue = document.getElementById("guess").value
let attempt = 1
if (guessValue < randomNumber) {
attempt.innerHTML = "Attempt n: " + attempt
result.innerHTML = "Your guess is too low";
} else if (guessValue > randomNumber) {
attempt++
result.innerHTML = "Your guess is too high";
} else {
result.innerHTML = "You guessed correctly";
}
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Guess the number</title>
</head>
<body>
<h1>GUESS A NUMBER:</h1>
<p>Enter a guess:</p>
<input type="number" id="guess">
<input type="submit" value="SUBMIT" id="button">
<div>
<p class="attempt"></p>
<p class="result"></p>
</div>
<script src="script.js"></script>
</body>null
我不明白为什么actempt.innerhtml不能工作。 它不像“结果”那样显示在页面上。
您在包含html元素的函数外声明了一个全局尝试变量，然后在函数中声明了一个始终为1的局部尝试变量。
在函数外声明一个计数器，然后每次调用函数时递增它。
另外，在您的回答中，您只在特定条件下递增计数并更新if else块中的尝试。innerHTML。 您希望将此代码移到if else块之外，这样它就会对每个猜测进行更新。
attemptCounter++
attempt.innerHTML = "Attempt n: " + attemptCounter
null
let randomNumber = Math.floor(Math.random() * 30) + 1
let result = document.querySelector(".result")
let button = document.getElementById("button")
let guess = document.getElementById("guess")
let attempt = document.querySelector(".attempt")
let attemptCounter = 0
button.addEventListener("click", checkGuess)
function checkGuess() {
let guessValue = document.getElementById("guess").value
// Increment Attempts by 1
attemptCounter++
attempt.innerHTML = "Attempt n: " + attemptCounter
if (guessValue < randomNumber) {
result.innerHTML = "Your guess is too low";
} else if (guessValue > randomNumber) {
result.innerHTML = "Your guess is too high";
} else {
result.innerHTML = "You guessed correctly";
}
} <h1>GUESS A NUMBER:</h1>
<p>Enter a guess:</p>
<input type="number" id="guess">
<input type="submit" value="SUBMIT" id="button">
<div>
<p class="attempt"></p>
<p class="result"></p>
</div>
您正在将局部范围中的尝试变量重新定义为整数，这将覆盖对document元素的引用。 当您使用“innerHTML”时，您在本地化尝试中使用它（一个整数，而不是文档元素）
请尝试以下操作:
let randomNumber = Math.floor(Math.random() * 30) + 1
let result = document.querySelector(".result")
let attempt = document.querySelector(".attempt")
let button = document.getElementById("button")
let guess = document.getElementById("guess")
button.addEventListener("click", checkGuess)
let attemptCount = 1 // Renamed this from attempt and moved to global scope
function checkGuess() {
let guessValue = document.getElementById("guess").value
if (guessValue < randomNumber) {
attempt.innerHTML = "Attempt n: " + attemptCount // Updated Here
result.innerHTML = "Your guess is too low";
} else if (guessValue > randomNumber) {
result.innerHTML = "Your guess is too high";
} else {
result.innerHTML = "You guessed correctly";
}
attemptCount++;
}
