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."; } }

以下的同一个区块内

the simplest way would be:

var div = document.getElementsByClassName("elgg-foot")[0];
var input = div.getElementsByTagName("input")[0];
alert(input.value)

此外，下次发布此类问题时，请考虑链接到免费的在线沙盒，如CodePen或JSBin。这样人们就可以编辑代码而无需复制/粘贴。

这是我为您的问题所做的CodePen： http://codepen.io/ultralame/pen/OyWbeW.js

Answer 2

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

 int age = 3;

System.out.println("He is " + age + " years old");

Javascript：针对某个号码采取特定措施

2 个答案: