Javascript while循环在用户通过提示符输入时运行良好，但在textbox中运行不正常？

这是学校作业的一部分，我不知道发生了什么。我正在修改以前的一个项目，将提示更改为用户输入的文本框。提示符工作正常，while循环按其应该的方式执行。一旦我切换到文本框，循环会自动运行整个过程直到结束，甚至不让我输入一个数字。文本框在我的应用程序中无法正常工作的本质区别是什么？我已经包含了正确运行的原始提示，并对其进行了注释

我包括了项目中的所有内容，但我现在唯一关心的是JS中的while循环，也许还有HTML中的文本框。请帮助我找到导致循环无法正确运行的错误所在。谢谢

JS

---

当文本框不执行时，警报框停止执行。如果您想让文本框像警报一样工作，它很可能需要完全不同的体系结构，因为无法延迟循环（除了可能使用promise对象的复杂异步循环）@KevinF您所说的不同体系结构是什么意思？我需要重新构造循环吗？我想这取决于游戏是如何进行的。他们是否键入一些内容并单击猜测按钮，然后逻辑运行？或者如果他们停止打字几百毫秒，逻辑会运行吗？

var ranNum;

//Main function for the game logic
function playGame() {

//Declaring variables
var answer;
var found = false;
var count = 6;
var runningcount = 5;


//While loop runs while user has guesses remaining and has not found answer.
while ((count > 0) && (found == false))
{
    //answer = prompt("Guess a number between 1 and 50!");
    answer = document.getElementById('userGuess');


    //If user presses cancel this will display
    if (answer === null) {
       document.getElementById('guesses').innerHTML += "I guess you are choosing to end the game now? See you next time!<br /><br />";
       document.getElementById("startButton").disabled = true
       return
    }

    //This ensures the answer entered is a number
    answer = parseInt(answer);

    //If the answer is not a number, this is displayed
    if (isNaN(answer)) {
        document.getElementById('guesses').innerHTML += "That is not a number! Enter a number! You wasted a guess! You now have " + runningcount + " guesses remaining. <br /><br />"

    }

    //Response if user guesses too high.
    if (answer > ranNum) {
        document.getElementById('guesses').innerHTML += "Your guess of " + answer + " was too high! You now have " + runningcount + " guesses remaining. <br /><br />"

    }

    //Response if user guesses too low
    if (answer < ranNum) {
        document.getElementById('guesses').innerHTML += "Your guess of " + answer + " was too low! You now have " + runningcount + " guesses remaining. <br /><br />"

    }

    //Response if user guesses correctly
    if (answer == ranNum) {
        document.getElementById('guesses').innerHTML += "Your guess of " + answer + " is correct! <br /><br />";
        found = true;
        document.getElementById("startButton").disabled = true;
    }


    //Subtracts one from the remaining count after each guess
    count--;

    //Subtracts one from the displayed remaining guesses after each guess
    runningcount--;
}

//Once the user runs out of guesses, this logic is executed.
if (!found) {
    document.getElementById('guesses').innerHTML += "Sorry you didn't guess correctly!<br /> The correct answer was " + ranNum + "<br /><br /> Please press New Game to try again.<br />";
    document.getElementById("startButton").disabled = true;
}


return found;

}

function switchVisible() {
if (document.getElementById('startScreen')) {

    if (document.getElementById('startScreen').style.display == 'none') {
        document.getElementById('startScreen').style.display = 'block';
        document.getElementById('gameScreen').style.display = 'none';
    }
    else {
        document.getElementById('startScreen').style.display = 'none';
        document.getElementById('gameScreen').style.display = 'block';
    }
}
}

//This is the function that generates the random number each time
function generateRandomNumber()
{
ranNum = Math.floor(Math.random() * 50) + 1;
}

//This executes the the random number function as soon as the page loads
window.onload = function ()
{
generateRandomNumber();
}



//This is the function for reloading the page when the user selects New Game.
function newGame() {
location.reload(true);
 }

<div id="startScreen">

    <h2> Guessing Game! Press Start to Play! </h2>
    <button id="startButton" onclick="switchVisible(); playGame(); ">Start Game!</button>

    <hr />
    <br />

</div>

<div id="gameScreen">
    <br />
    <input type="text" id="userGuess" />

    <br />
    <button id="newButton" onclick="newGame(); switchVisible(); ">New Game!</button><hr />
    <br />

    <span id="guesses">
    </span>  

#startScreen
{
margin-left: auto;
margin-right: auto;
margin-top: 250px;
width: 650px;
height: auto;
border-style: groove;
border-width: 15px;
text-align: center;
border-color: red;

}

#gameScreen
{
margin-left: auto;
margin-right: auto;
margin-top: 250px;
width: 650px;
height: auto;
border-style: groove;
border-width: 15px;
text-align: center;
border-color: red;
display: none;
}