0

Sorry if this seems too simple or silly, but I'm just trying to get a grasp on this. I'm doing some homework and the assignment is to make a guessing game. The user is prompted to select a number to serve as the maximum for the range. Everything works as intended: messages are displayed based on the guesses the user makes ("You got it!" "Go lower." "Go higher." etc.), decimals are rounded if input as the max, and the like. I want the instructions shown on the page to change based on the max number selected. So instead of it simply saying "Guess a number" I want it to say "Guess a number between 1 and 20" (if 20 was inputted as the max) or "Guess a number between 1 and 13" (if 13 was inputted as the max). I've only just started learning this kind of stuff and would appreciate some help!

Here is what I have in the html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <title>Higher Lower</title>
  </head>
  <body>
    <div class="container">
        <h1>Higher Lower</h1>
        <p id="instructions">Guess a number</p>
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <form>
                    <div class="form-group">
                        <label>Your guess:</label>
                        <input type="text" id="guess" class="form-control">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="do_guess()">Guess</button>
                </form>
            </div>
        </div>
        <p id="message"></p>
    </div>
  
    <script src="enhigherlower.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </body>
</html>

Here is what I have in the javascript file:

let input = window.prompt("What should the maximum number be?");
let num_max = Number(input)
let valid_input = false;

let val = Math.round(Math.num_max);



while(!valid_input) {
    input = window.prompt("What should the maximum number be?");
    num_max = Number(input);
    if(!isNaN(num_max) && num_max > 0) {
        valid_input = true;
    }
}



let num = Math.floor(Math.random() * num_max) + 1;

console.log(num);

function do_guess() {
    let guess = Number(document.getElementById("guess").value);

    let message = document.getElementById("message");

    if(guess == num) {
        message.innerHTML = "You got it!";
    }
    else if (guess > num) {
        message.innerHTML = "No, try a lower number.";
    }
    else {
        message.innerHTML = "No, try a higher number.";
    }
    if(guess > num_max) {
        message.innerHTML = "That number is not in range, try again.";
    }
    if(guess < 1) {
        message.innerHTML = "That number is not in range, try again.";
    }
    if(isNaN(guess)) {
        message.innerHTML = "That is not a number!";
    }
}
Tito Capotito
  • 1
  • 1
    What isn't working in your attempt? It sounds like you're asking how to set the `innerHTML` of an element on the page, but your code already demonstrates exactly how to do that. Is that not working? – David Jan 18 '23 at 17:56
  • Yes, I've been looking up similar problems that people have had and it usually does involve innerHTML or innerText, but I can't get it to work. Or perhaps I'm not understanding the actual process. I don't know if I should just ditch the

    in the HTML file and generate a caption or message in the js file based on num_max. If that's the move here, I guess I would still need some guidance with that lol.

     – Tito Capotito Jan 18 '23 at 18:04
  • *"but I can't get it to work"* - If the code you've written is failing in some way, this is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? – David Jan 18 '23 at 18:06

0 Answers0