如何在 JavaScript 猜数字游戏中跟踪尝试次数答案

【问题标题】：How to keep track of attempts in a JavaScript guess-the-number game如何在 JavaScript 猜数字游戏中跟踪尝试次数
【发布时间】：2020-07-26 14:34:51
【问题描述】：

我的目标是跟踪游戏中的尝试。这是我目前的代码。

我编辑了这篇文章以了解 count = 0 和 count = 1 之间的区别。

let randomNumber = Math.floor(Math.random() * 30) + 1

let result = document.querySelector(".result")
let attempt = document.getElementById("attempt")
let button = document.getElementById("button")
let guess = document.getElementById("guess")
let count = 1

button.addEventListener("click", checkGuess)

function checkGuess() {
    let guessValue = document.getElementById("guess").value;
    
    if (guessValue < randomNumber) {
       attempt.innerHTML = "Attempt n: " + count
        result.innerHTML = "Your guess is too low";
        count++
    } else if (guessValue > randomNumber) {
        attempt.innerHTML = "Attempt n: " + count
        result.innerHTML = "Your guess is too high";
        count++
    } else {
        attempt.innerHTML = "Attempt n: " + count
        result.innerHTML = "You guessed correctly in " + count++ + " 
        attempts";
    }
}

<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>

我不明白为什么attempt.innerHTML 不起作用。它不像“结果”那样显示在页面上。

【问题讨论】：

let attempt = 1，这会在您的函数中创建一个名为 attempt 的变量，该变量设置为一个数字。
哦，多么愚蠢的错误！我把变量和计数混淆了！哈。谢谢！
您的函数外部有一个名为attempt 的变量引用了一个HTML 元素，但您的函数内部也有一个名为attempt 的变量，它是一个数字。做attempt.innerHTML 就像做(1).innerHTML 如果attempt 是1

标签： javascript html innerhtml

【解决方案1】：

您在包含 html 元素的函数外部声明了一个全局尝试变量，然后您在函数中声明了一个本地尝试变量，该变量始终为 1。

在函数外部声明一个计数器，然后在每次调用函数时递增它。

此外，在您的回答中，您只是在特定条件下增加计数并更新 if else 块中的 try.innerHTML。您想将此代码移到 if else 块之外，以便在每次猜测时更新。

attemptCounter++
attempt.innerHTML = "Attempt n: " + attemptCounter

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>

【讨论】：

与这个问题不严格相关，但是为什么计数器，如果在函数内部定义，总是1？还是要清楚地理解全局变量和局部变量的区别。此外，对这篇文章的一个建议 - 计数器应该从 1 开始，否则第一次尝试是 0。
当应用程序加载时，计数器应该为 0，因为用户从未尝试过。只有当他们单击按钮时，您才会想要增加尝试计数。当你在函数中有let counter = 1 时，你总是在每次运行 checkGuess() 函数时设置一个新变量，因为你将它设置为 1，所以它总是 1
@GraceP 它始终为 1，因为每次调用该函数时，都会在 if else 语句之前将其重新定义为 1。当您将变量移出函数时，每次调用该函数时，它都会引用已经存在的变量而不是创建一个新变量
@GraceP 我为您添加了一个代码 sn-p，以便您可以看到它正在运行，希望对您有所帮助
@JasonMcFarlane 永远不会意识到如果我没有看到它，没有必要在 if/else 语句中编写 innerHTML。我想我会以我的方式留下它，因为我更好地理解它，即使代码重复了一点。此外，得到了计数器之间的差异。非常感谢。

【解决方案2】：

这是在一个页面上设置多个猜数字游戏的简化功能版本。所有游戏相关数据都保存在相关输入字段的数据集属性num 和try 中。

function guess(id){
 let el = document.getElementById(id);
 el.dataset.try=0;
 el.dataset.num = Math.floor(Math.random() * 30) + 1;
 el.onchange=()=>el.nextElementSibling.innerHTML =
    "Attempt "+(++el.dataset.try)+":<br>Your guess is "
     +["too low.","correct!","too high."]
      [Math.sign(el.value-el.dataset.num)+1]              
}
guess('guess1');guess('guess2');

  <h1>GUESS SOME NUMBERS:</h1>
  <p>Enter a guess:</p>
  <input type="number" id="guess1">
  <div></div>
  <p>Enter another guess:</p>
  <input type="number" id="guess2">
  <div></div>

【讨论】：

【解决方案3】：

您正在将本地范围内的尝试变量重新定义为一个整数，它会覆盖对文档元素的引用。当您使用“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
    attempt.innerHTML = "Attempt n: " + attemptCount
    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";
    }
    attemptCount++;
}

【讨论】：

增加新变量不会有任何影响，因为每次点击都会重新定义它
这将始终返回尝试计数 1，尝试计数必须在函数外部进行删除
你们两个都打得很好，我没有在代码中寻找其他问题，但我现在已经更正了
为什么投反对票？我回答了“它不像“结果”那样显示在页面上的问题。正如OP所要求的。问题不是“为什么它不增加？”所以我不是在寻找这样的
您的答案仍然存在错误，这就是投票失败的原因。首先，您将尝试计数限定在函数内部，因此它始终为 1。目前，在您的答案中，您仅在数字太低时更新尝试计数文本，并且仅在数字为 2 高时才增加尝试计数。您的答案中有 3 个主要错误，这就是为什么不赞成，在您将看到的代码笔上进行测试