Taking a specific action on reaching a number

I'm learning JavaScript, and decided to try out a simple guessing game thing. The code I have at the moment:

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

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

and the 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;

}

What I was looking to do was - as soon as the number of guesses reach 0, the result should display that you're out of guesses. I've managed to validate the guesses counting down to 0 (not going to negative). I tried using an if statement which would check if the guesses were out, then set the result accordingly and return. But apparently, as soon as return is reached, the control exits the method. I didn't know this would happen even inside an if that's never reached.

Either way, how do I modify the code such that the result is set as soon as the guesses left hit zero?

Solution

Remember that your variable guesses might not be what is displaying on the remaining element, you should decrement the variable before your condition.

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