Fatal编程技术网
  • javascript/
  • Javascript：在达到某个数字时执行特定操作

Javascript：在达到某个数字时执行特定操作

javascript css

Javascript：在达到某个数字时执行特定操作,javascript,css,javascript-events,return,Javascript,Css,Javascript Events,Return,我正在学习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"&

我正在学习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>
我想做的是——一旦猜测的次数达到0，结果应该显示你已经猜不到了。我已经成功地验证了倒计时到0（而不是负）的猜测。我尝试使用if语句检查猜测是否正确，然后相应地设置结果并返回。但是显然，一旦到达
返回
，控件就会退出该方法。我不知道这会发生，即使在一个从未达到的地方

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

由于您正在减少if语句中的猜测计数器，因此需要将
猜测===0
的检查移动到同一块中
猜测--

同样，下一次你发布这样的问题时，也要考虑链接到一个免费的在线沙盒，比如科特森或JSBin。这样人们就可以编辑您的代码，而无需复制/粘贴

这是我为你的问题制作的密码笔：

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


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



感谢您提供有关在正确位置减少
猜测的提示。我还没有能够运行这段代码，但是if块中的
返回
不会在一开始就结束方法本身吗？类似于我想要的东西…只有当你已经达到0次猜测时，返回状态才会触发，这将防止你的猜测低于0。如果您还有1个猜测，并且单击按钮，则不会触发此操作。只需在控制台上输入
console.log（猜测）就可以了注释语句前一行，查看变量如何与代码交互。感谢提供代码笔信息！虽然我以前见过人们用它来回答问题，但我当时并不太明白它的重要性。现在一切都好了。

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;

}



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



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