JavaScript：使用提示框的用户输入生成随机数（猜数字游戏）答案

【问题标题】：JavaScript: Generating a random number with user input from a prompt box (number guess game)JavaScript：使用提示框的用户输入生成随机数（猜数字游戏）
【发布时间】：2022-02-13 22:28:41
【问题描述】：

用户必须根据他们输入到提示框中的最高值来猜测随机生成的数字。示例（从 1 到 ?）我必须使用提示，并且该值不能是小数或字符串。我不确定如何验证，或者只是不允许用户输入无效条目。

我在重用他们在函数中输入的数字以在游戏中生成随机数let num = Math.floor(Math.random() * inputMaxNumber + 1); 时遇到问题。我尝试将值从字符串转换为数字，但这也不起作用。这是我目前所拥有的：

//prompt for max number the user inputs 
function maxNumber() {

    let inputMaxNumber = prompt ("Enter the maximum number the game can pick", " #");
    if ( inputMaxNumber > 1) {
        document.getElementById("maxNumber").innerHTML = "Guess a number between 1 and " + inputMaxNumber; 

        }
    else {
        alert("You must enter a positive whole number greater than 1");
    }

    console.log(inputMaxNumber);

}

inputMaxNumber = Number(document.getElementById("maxNumber").value); //converts this to a number from a string

// array that stores guesses
var numGuessArray = []



//validates user input for guesses (no decimals, strings, or negative numbers)
function onlyNumbers(num){
    if ( /[^0-9]+/.test(num.value) ){
       num.value = num.value.replace(/[^0-9]*/g,"")
    }
 }

//get user input to use in random number generation


// random value generated based on user input (a) new variable is num
let num = Math.floor(Math.random() * inputMaxNumber + 1);

console.log(num);
//counts the number of guesses for correct guess
var guess = 1;

//store counts and numbers guess in an array (don't count invalid guesses)

function do_guess() {


    let guess = Number(document.getElementById("guess").value); //converts this to a number from a string

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

    //show on console
    console.log(guess);

    //hints about guess

    if(guess == num) { //correct guess with count
        message.innerHTML = "You got it and it took " + guess + " guess!";
    }
    else if (guess > num) { //number too high
         message.innerHTML = "No, try a lower number";
    }
    else {//number too low
        message.innerHTML = "No, try a higher number";
    }

    //you already guessed that number NO COUNT

}
//guess button used to guess
//use an array to keep track of the guess

 <div class="container">
    <h1>Higher - Lower</h1>
        <p>Guess a number</p> 
        <div class = "row">
            <div class ="col-lg-3 col-md-6"> 
                <form>
                <div class ="form-group">
                    <!-- This button triggers the prompt to allow the user to enter the max number-->
                    <input type ="button" value = "Click To Start" onclick = "maxNumber()";/>
                </div>


                <div class ="form-group">
                    <label> Your Guess:</label>
                    <!-- Prevents user from inputing decimals with onkeyup-->
                    <input type ="text" onkeyup="onlyNumbers(this)" id="guess" class ="form-control"> 
                </div>


                <p id = "maxNumber" ></p><!--Outputs maximum number range the user selected-->
                <!--Button calls guess funciton when clicked-->
                <button type="button" class ="btn btn-primary" onclick = "do_guess()">Guess</button> 
            </form>
        </div>
    </div>
        <p id="message"></p> <!--Where message will go-->
    </div>

    <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>

【问题讨论】：

标签： javascript html

【解决方案1】：

在函数maxNumber() 中，你在本地定义了inputMaxNumber let inputMaxNumber = prompt(...);，所以当函数执行结束时它的值会丢失。

此外，生成随机数的代码仅在页面加载let num = Math.floor(...); 时执行一次。用户输入最大值后不会执行。

解决方案：

全局定义num
在maxNumber()中为其分配随机值

【讨论】：