采取特定行动达到某个数字

Question

我正在学习 JavaScript，并决定尝试一个简单的猜谜游戏。我现在的代码：

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Guessing Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
     
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="guessing_game.css">
</head>
<body>
<h1>Welcome to the guessing game</h1>
<p>You have to guess the number within 5 attempts, so good luck!</p>

<p>Enter a number:</p>
<input type="text" id="number" placeholder="Enter number"></br>

<input type="submit" id="submit" value="Guess!"></br>
<aside>
    <div id="counter">

    <p>Remaining Guesses</p>
    </div>
    <p id="remaining"></p>  
</aside>
<div id="result"></div>
<script type="text/javascript" src="guessing_game.js"></script>
</body>
</html>

JS：

var guesses = 5;

function guess() {
    var elGuess = document.getElementById("remaining");
    var elResult = document.getElementById("result");
/*  if(guesses === 0) {
        elResult.innerHTML = "<p>Sorry, you ran out of guesses! Better 
        luck next time.</p>";
        return;
    }*/

    if(guesses > 0) {

        guesses--;
        elGuess.textContent = guesses;

        //random number
        var secret = Math.floor(Math.random() * 10 + 1);

        var elUserGuess = document.getElementById("number");
        var userGuess = parseInt(elUserGuess.value);

        

        if(userGuess == secret) {
            elResult.textContent = "Congrats! You did it";
        }

        else {
            elResult.textContent = "Sorry, please try again.";
        }
    }

    else {
        elResult.textContent = "Sorry, you ran out of guesses.";
    }            
    
}

var elSubmit = document.getElementById("submit");
elSubmit.addEventListener("click", guess, false);

和 CSS:

body {
    font-family: 'Roboto', sans-serif;
}

aside {
    position: relative;
    top: -150px;
    width: 300px;
    height: 600px;
    float: right;
    border-left: 2px solid gray;
}

#counter p{
    position: absolute;
    top: 120px;
    width: 140px;
    left: 60px;
    border-top: 2px solid brown;
    text-align: center;
    border-bottom: 2px solid brown;
    padding: 5px;
}

#remaining {
    font-size: 220%;
    text-align: center;
    font-family: Arial, Verdana, serif;
    position: absolute;
    top: 170px;
    border-bottom: 1px solid green;
    padding: 2px;
    left: 130px;
    color: #ff2400;

}

#result {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.9em;
    color: gray;

}

我想要做的是 - 一旦猜测次数达到 0，结果应该显示您没有猜到。我已经设法验证了倒数到 0（不会为负）的猜测。我尝试使用 if 语句来检查猜测是否正确，然后相应地设置结果 return。但显然，一旦达到 return，控件就会退出该方法。我不知道即使在从未达到的情况下也会发生这种情况。

无论哪种方式，我如何修改代码，以便在剩下的猜测为零时立即设置结果？

Answer 1

由于您要在该 if 语句中递减您的猜测计数器，因此您需要将对 guesses === 0 的检查移动到 guesses--;

下面的同一块内某处

if (guesses > 0) {

    guesses--;
    elGuess.textContent = guesses;

    //random number
    var secret = Math.floor(Math.random() * 10 + 1);

    var elUserGuess = document.getElementById("number");
    var userGuess = parseInt(elUserGuess.value);

    if (userGuess == secret) {
        elResult.textContent = "Congrats! You did it";
    }

    if (guesses === 0) {
      elResult.textContent = "Sorry, you ran out of guesses."
    } else {
      elResult.textContent = "Sorry, please try again.";
    }
}

此外，下次您 post 提出这样的问题时，还可以考虑链接到免费的在线沙箱，如 CodePen 或 JSBin。这样人们就可以编辑您的代码而无需 copy/paste.

这是我为你的问题制作的CodePen： http://codepen.io/ultralame/pen/OyWbeW.js

Answer 2

请记住，您的变量猜测可能不是剩余元素上显示的内容，您应该在条件之前递减变量。

var guesses = 5;

function guess() {
    var elGuess = document.getElementById("remaining");
    var elResult = document.getElementById("result");

    if (guesses===0){
        return;
    }

    guesses--;

    elGuess.textContent = guesses;

    if(guesses > 0) {

        var secret = Math.floor(Math.random() * 10 + 1);

        var elUserGuess = document.getElementById("number");
        var userGuess = parseInt(elUserGuess.value);



        if(userGuess == secret) {
            elResult.textContent = "Congrats! You did it";
        }

        else {
            elResult.textContent = "Sorry, please try again.";
        }
    }
    else {
        elResult.textContent = "Sorry, you ran out of guesses.";
    }            

}

var elSubmit = document.getElementById("submit");
elSubmit.addEventListener("click", guess, false);

采取特定行动达到某个数字

Taking a specific action on reaching a number

javascript

css

return

dom-events