Generating a new comment on click?

I Love Programming
1

I’m working on an assignment to make a “higher or lower” guessing game. I finished it all early and I wanted to get some practice in with arrays… I’d like to have a random comment depending on the given condition. I’ve tried using the math.Random method but it only generates one comment from the list every time.

This is the code for the HTML part of things. The comment should replace “lets go”.

<form action="" method="get" id="guessGame" onsubmit="guessNumber(event)" onsubmit="return guessNumber()">
        <label for="Number Guessing Game">Enter A Guess:</label><br>
        <input type="number" id="guess" name="guess" placeholder="50" min="1" max="100" required/>
        <button type="submit" id="submit" name="submit">Submit Guess</button>
    </form>
    <br>
    <div id="sealSpeaking">
    <p onclick="">
        lets go.
    </p></div>

The array variable I’ve made.

let higherComment = [
        "the magic number is higher than your guess.",
        "more than that. i can count to 100.", 
        "add more numbers to that integer. maybe like 2 or 47 more?", 
        "that's not enough tinned fi - sorry i meant numbers. higher.", 
        "your number isn't high enough. quit fooling around."];
        let randomHigherComment = higherComment[Math.floor(Math.random() * higherComment.length)]

And the condition to comment on.

switch(true) {
        case(sealNum > guess): {
            guessAttempt++;
            document.getElementById("sealSpeaking").innerText = (higherComment[randomHigherComment])
            break;
        }
    }

Thank you!

2

I believe the issue might lie in that you are generating a random number once and using that as the index so it’s always the same comment, to get a random comment each time you submit the form you would need to generate the random number every time so the index varies

Edit: I also noticed your switch statement uses higherComment[randomHigherComment] , you might need to check if randomHigherComment returns an integer to be used as an index

1 Like
3

it is not possible to separate snippets, please give a single JS snippet to debug. Maybe create a functioning example of your issue on codepen?

1 Like
4

As wendel.t.c noted, pick a new index inside guessNumber each time the form is submitted. In the higher branch, for example:

const index = Math.floor(Math.random() * higherComment.length);
document.querySelector('#sealSpeaking p').textContent = higherComment[index];

Your original randomHigherComment is already a string, not an index, so don’t use it inside higherComment[...]. As ILM suggested, a complete runnable example would help if the issue persists.

2 Likes
5

Alright, thank you! I’ll look into that. Here’s the codepen link (can’t edit the original post since I haven’t been active for long enough…)

6

Here’s the codepen link! Sorry about that, I’m still pretty new at all of this, including troubleshooting from others.

7

what line is randomWinComment created at?

8

Whoops. randomWinComment should have been replaced with randomHigherComment. I’ll remove that right now - I overlooked it yesterday while rewriting the code. Edit: Updated.

9

and how do you expect the value of randomHigherComment to change?

10

Ideally, randomHigherComment would generate a new comment from the array on each button (submit) click.

11

ideally yes, but right now, when does it get a new value?

you need to have the line let randomHigherComment = higherComment[Math.floor(Math.random() * higherComment.length)] in the place that makes it so, what is the scope that is run at every click?

12

So would I turn the comment arrays into a function and call that function in submitguess with onsubmit?

13

Thank you! That resolved my issue. I appreciate it a lot. Have a great day :slight_smile: !! (Changed onsubmit to onclick).