Number Guesser Project: How do I include an alert function?

Hello everyone,

I am doing the Number Guesser project after the Javascript functions lessons and I am stuck as to how to add an alert function. This is the link to the project:

I am stuck on the second bullet of task #7:

“Add functionality to check whether the user guess is between 0 and 9 and alert() the user that their number is out of range. It’s not possible to set a number outside this range with the + and = buttons, but users can do so by typing directly in the input field.”

This is the code I’ve tried:

const alert = () => {
    if (userGuess > 9) 
    return 'Alert, guess must be between 0 and 9!'
};

Any help would be greatly appreciated!

alert is a function present in browsers

2 Likes

Does that mean I don’t have to write code for it? Only alert() with the message in the ()? How do I get it to show when I enter a number greater than 9 in the user input field?

If your code runs in a browser then you can call it and a (annoying) popup will show up.
https://developer.mozilla.org/en-US/docs/Web/API/Window/alert

2 Likes

I appreciate your help! I still don’t fully understand it though. I inserted alert() and got the (annoying) popup in my browser, however, I only want the alert to show when I enter a number greater than 9 in the user input field. How do I accomplish that?

Here is the rest of the code:

const generateTarget = () => {
   return Math.floor(Math.random() * 10);
}

const compareGuesses = (userGuess, computerGuess, targetGuess) => {
    const humanDifference = Math.abs(targetGuess - userGuess)
    const computerDifference = Math.abs(targetGuess - computerGuess)
    return humanDifference <= computerDifference;
}

const updateScore = winner => {
    if (winner === 'human') {
        humanScore++;
    } else (winner === 'computer'); {
        computerScore++;
    }
}

const advanceRound = () => currentRoundNumber++;
1 Like

If you navigate to the game.js file is there a function called: handleValueChange? I did this project some time ago, and can’t remember if the function was already there, or if I added it. If it already exists, you can modify it to display your alert if the value is less than 0 or greater than 9. I took a different approach, and disabled the buttons when the limits are reached. I also disabled the input box in the index.html file, so users can’t type directly into it. I also changed the CSS by setting the cursor: property to none, so the cursor is not visible when the user hovers over the input box.

The simpler approach would be to insert an if ... else in your compareGuesses function that calls the alert if the userGuess is out of range or runs the current code if the userGuess is valid. You could return false after the alert displays. That would give the user a loss for not following directions :wink:

3 Likes

Ah I see! Thanks for the help, much appreciated!

2 Likes

Hi! I didn’t want to clutter the forms by making an additional thread and i feel my question will fit well here.

I finished the additional work the project offered but one thing is bugging me. When you play the game, after you hit next round, there is no number placed in the box (unlike when you first start the game, 0 is placed in the box.) If you play the game and go to the next round the [Make a Guess] user entry box is blank. I would have thought 0 would have been “re-entered” into the box but it isn’t. To add to that If the computer guesses 0 and you [Make a Guess] without putting a value in the computer wins even if the computer’s guess is 0. Meaning if you do not put a value in the [Make a Guess] area SOMETHING is running through the code but it is not 0 as any ties result in a players win.

My question is. Is there something I can add to my If…else statement to return a (edit:)true value if that value isn’t a number? For example, if the user enters a letter. I’ve tried alot of different things and at this point it would be easier to just try to have 0 be re-entered when moving to the next round lol, but i’m supper curious now. Any help will be much apretiated!
code so far:

function compareGuesses(humanGuess, computerGuess, target) {
    if (humanGuess > 9 || humanGuess < 0 || !Number.isSafeInteger(humanGuess) || Number.isNaN(humanGuess) || humanGuess === undefined) {
return alert('Invalid entry. Please check that your number is between 0 and 9.')
}

This code still lets the absent of an entry go through. Even if i type a letter in.

Don’t return a value that can be interpreted as a boolean. Crash.