时间戳

首页 > 解决方案 > 在 if 语句中执行错误的函数

javascript - 在 if 语句中执行错误的函数

问题描述

/* 
GAME FUNCTION:

- player must guess a number beetween min and max
- player gets a certain amount of guesses
- notify player of guesses remaining
- notify the player with a correct number if he loose
- let player choose to play again
*/


// variabels

//game values
let min = 1,
max = 10,
winningNum = 2,
guessesLeft = 3;

// UI elements
const game = document.getElementById('game'),
minNum = document.querySelector('.min-num'),
maxNum = document.querySelector('.max-num'),
guessBtn = document.getElementById('guess-btn'),  
guessInput = document.getElementById('guess-input'),  
message = document.querySelector('.message');

// assign ui min and max
minNum.textContent = min;
maxNum.textContent = max;

// event listener

function loadEventListener() {
    // listen for guess
    guessBtn.addEventListener('click' , checkGuess );
    
};

loadEventListener();

// checks the entered number
function checkGuess() {
    let guess = parseInt(guessInput.value);
    
    //validate the input
    if(isNaN(guess) || guess < min || guess > max ) {
        console.log('here')
/////// this below code setMessage is not executing when the condintions are true.. ////
        setMessage(`Please enter a number between ${min} and ${max}` , 'red');
        console.log('here again')
        
    };
    
    //check if won
    if(guess === winningNum) {
        // right case here
        //dsiabe input
        guessInput.disabled = true;
        // change border color
        guessInput.style.borderColor = 'green';
        // set message
        setMessage(`${winningNum} is correct.. you WON the game!!` , 'green');
    } else {
        // wrong case here
        guessesLeft -= 1;
        
        if(guessesLeft === 0) {
            // game over - lost
            // disable input
            guessInput.disabled = true;
            // change border color
            guessInput.style.borderColor = 'red';
            // set message
            setMessage(`Game over..! The correct Number was ${winningNum}..` , 'red');
        } else {
            // game continues - answer wrong
            // change border color
            guessInput.style.borderColor = 'red';
            // clear input
            guessInput.value = '';
            // tell user its the number 
            setMessage(`${guess} is not Correct,${guessesLeft} guesses left.` , 'orange')
             };
        
    }
};


// set message
function setMessage(msg , color) {
    message.style.color = color;
    message.textContent = msg;
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
    <title>Number Guesser</title>
</head>
<body>
    <div class="container">
        <h1>Number Guesser</h1>
        <div id="game">
            <p>Guess a number beetween 
                <span class="min-num"></span>
                and 
                <span class="max-num"></span>
            </p>
            <input type="number" name="" id="guess-input" placeholder="Enter Your Guess...">
            <input type="submit" value="submit" id="guess-btn">
            <p class="message"></p>
        </div>
    </div>
    
    <script src="app.js"></script>
</body>
</html>
当我在不输入值的情况下单击提交按钮时，第 49 行setMessage中的函数应该执行，但它正在执行第 82 行的代码..，它应该在第 49 行代码中显示消息（放置在参数中的消息），但它的显示来自第 82 行的消息..请查看问题..代码中还有什么问题？？？

标签： javascript

解决方案

您的问题是您在验证失败时不会退出该checkGuess()功能。

如果您return;在显示失败的验证错误后添加一个，那么它将解决您的问题...

function checkGuess() {
    let guess = parseInt(guessInput.value);

    //validate the input
    if(isNaN(guess) || guess < min || guess > max ) {
        setMessage(`Please enter a number between ${min} and ${max}` , 'red');

        return; // exit the function here, since we've failed validation
    };

推荐阅读