(Logical Error) Simple Random Number Guessing Game - Javascript

Question

The following code is not quite working.

Here is a couple of my observations:
1- No matter what the user guesses, the message "You Win!" Always show up
2- Console.log(yourguess) shows a blank space

Code:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Lab12</title>
    <style>

    </style>
</head>

<body>
    <p>Guess a number between 1 and 1000:</p>
    <input type="text" id="theguess"> <br>
    <button type="button" onclick="calc()" id="thebutton">Check Guess</button>
    <p id="clue">No Guess Yet</p>
    <p>You guessed</p>
    <p id="c"> 0 </p>
    <p>Times!</p>
    <br>
</body>
</html>

Javascript:

    <script>
        let correct = Math.floor(Math.random() * 1000);
        let yourguess = document.getElementById("theguess").value;
        let count = 0;

        calc = () => {
            console.log(yourguess)
            if (thebutton) {
                count++
                document.getElementById('c').innerHTML = count;
            }
            if (count === 10) {
                document.getElementById("thebutton").disabled = true;
            }
            if (this.correct === this.yourguess) {
                document.getElementById('clue').innerHTML = 'You Win!';
            }
            else if (this.correct < this.yourguess) {
                    document.getElementById('clue').innerHTML = 'Too low. Try Higher!';
                }
            else{
                    document.getElementById('clue').innerHTML = 'Too High. Try Lower!';
                }

        }
    </script>

There is no syntax error, which is why I can't quite point my finger on where the error is

Stackoverflow people, do your thing!

You are getting the value of your guess outside your function. Hence the value is the input box value when the page first loaded. — peekolo
– peekolo, Commented Nov 17, 2019 at 18:51
Also you never defined or assigned a value to thebutton variable. — PM 77-1
– PM 77-1, Commented Nov 17, 2019 at 18:53
Okay. The blank (yourguess) is solved. But how to fix the (You Win!) — Ali
– Ali, Commented Nov 17, 2019 at 18:57

kmiklas · Accepted Answer · 2019-11-17 18:54:25Z

1

yourguess is assigned when the page loads... when it’s blank. Variables in script tags are assigned right away.

To fix this, get the value of yourguess as part of your calc routine... AFTER User inputs their guess.

For extra credit, do some input validation; make sure that the guess is a number/integer, and falls within the range.

answered Nov 17, 2019 at 18:54

kmiklas

13.6k23 gold badges78 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John · Accepted Answer · 2019-11-17 19:12:36Z

if you did the following

console.log(this.correct, this.yourguess);

You would get "undefined, undefined" which is why your guess is always correct by the following if statement

if (this.correct === this.yourguess) {

The solution is to remove "this."

Bear in mind, correct is type number and yourguess is a type string, when doing === it won't ever be correct due to the type being different. The following should solve this issue.

if (correct === parseInt(yourguess, 10)) {

Your other logic for too low / high is wrong for similar reasons.

Finally,

let yourguess = document.getElementById("theguess").value;

needs to be within the calc function given you need to update this value each time you click the guess button.

Elias Soares · Accepted Answer · 2019-11-17 20:23:36Z

1

There's a few errors here.

You are reading the input value outside the calc() function, this means that it will always read empty (default input value).
Same applies for the random number. You generate it only once the page starts. This means that the number will always be the same.
You are using Math.floor() instead of Math.round(). This means that the latest number (1000) will almost never occurs. (999.9999999999999) will turn into 999. Using round, anything greater then 999.5 will be 1000.
What is thebutton variable? You never initialized it.
You are using this. before some variables. Remove it.

So you code should be something like this:

    <script>
        let count = 0;

        calc = () => {
            let correct = Math.round(Math.random() * 1000);
            let yourguess = document.getElementById("theguess").value;

            console.log(yourguess)
            if (thebutton) { // what is thebutton? What's you expectation from this if?
                count++
                document.getElementById('c').innerHTML = count;
            }
            if (count === 10) {
                document.getElementById("thebutton").disabled = true;
            }
            if (this.correct === yourguess) {
                document.getElementById('clue').innerHTML = 'You Win!';
            }
            else if (correct < yourguess) {
                    document.getElementById('clue').innerHTML = 'Too low. Try Higher!';
                }
            else{
                    document.getElementById('clue').innerHTML = 'Too High. Try Lower!';
                }

        }
    </script>

edited Nov 17, 2019 at 20:23

answered Nov 17, 2019 at 18:58

Elias Soares

10.4k4 gold badges36 silver badges62 bronze badges

1 Comment

Ali Over a year ago

thebutton is the id of the onclick, I'm using it to disable the button once the user tries 10 time. Thanks for helping. But The user still always wins no matter what the input is. Edit: acutally I'm stupid. I just replaced "thebutton" with "true" and it worked the same way.

Collectives™ on Stack Overflow

(Logical Error) Simple Random Number Guessing Game - Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related