答案在 JavaScript 数字猜谜游戏中出现和消失

Question

我有一个代码可以检查用户输入的数字是否与随机生成的数字相同，但由于某种原因，我的输出出现了一会儿，然后又消失了。如何使输出不消失？输出：

<p id="guesses"></p>
<p id="lastResult"></p>
<p id="lowOrHi"></p>

这是我的网页：

<div class="col-sm-12">
    <h1>Guess that number!</h1>
    <form>
        <label for="guessField">Guess nr 1-100</label><br>
        <input type="text" id="guessField" class="input">
        <br><br>
        <button id="guessSubmit" onclick="checkGuess();" class="button">Submit</button>
    </form>
    <p id="guesses"></p>
    <p id="lastResult"></p>
    <p id="lowOrHi"></p>
</div>

这是javascript：

var randomNumber = Math.floor(Math.random() * 100) + 1;
console.log("random number generated");
var guesses = document.getElementById("guesses");
var lastResult = document.getElementById("lastResult");
var lowOrHi = document.getElementById("lowOrHi");
var guessSubmit = document.getElementById("guessSubmit");
var guessField = document.getElementById("guessField");
var guessCount = 1;
console.log("guess 1");
function checkGuess() {
    var userGuess = Number(guessField.value);
    console.log("userGuess");
    guesses.innerHTML += userGuess + " ";
    if(userGuess == randomNumber) {
        lastResult.innerHTML = "Congradz, you won!";
        lowOrHi.innerHTML = "";
        console.log("won");
    } else {
        lastResult.innerHTML = "This is NOT correct!";
        console.log("wrong");
        if(userGuess < randomNumber) {
            lowOrHi.innerHTML = "Your guess is too low!";
            console.log("too low");
        } else if(userGuess > randomNumber) {
            lowOrHi.innerHTML = "Your guess is too high";
            console.log("too high")
        }
    }
    guessCount++;
    guessField.value = "";
}

Answer 1

submit按钮提交。 return false;，或checkGuess底部的eventObject和eventObject.preventDefault()通过。请注意，后者是唯一在使用时有效的类型Element.addEventListener(function(eventObj){ eventObj.preventDefault()}) .

Answer 2

这是因为您提交了表单，因此刷新了页面。一种解决方案是将form tag更改为div tag

var randomNumber = Math.floor(Math.random() * 100) + 1;
console.log("random number generated");
var guesses = document.getElementById("guesses");
var lastResult = document.getElementById("lastResult");
var lowOrHi = document.getElementById("lowOrHi");
var guessSubmit = document.getElementById("guessSubmit");
var guessField = document.getElementById("guessField");
var guessCount = 1;
console.log("guess 1");
function checkGuess() {
    var userGuess = Number(guessField.value);
    console.log("userGuess");
    guesses.innerHTML += userGuess + " ";
    if(userGuess == randomNumber) {
        lastResult.innerHTML = "Congradz, you won!";
        lowOrHi.innerHTML = "";
        console.log("won");
    } else {
        lastResult.innerHTML = "This is NOT correct!";
        console.log("wrong");
        if(userGuess < randomNumber) {
            lowOrHi.innerHTML = "Your guess is too low!";
            console.log("too low");
        } else if(userGuess > randomNumber) {
            lowOrHi.innerHTML = "Your guess is too high";
            console.log("too high")
        }
    }
    guessCount++;
    guessField.value = "";
}

<div class="col-sm-12">
    <h1>Guess that number!</h1>
    <div>
        <label for="guessField">Guess nr 1-100</label><br>
        <input type="text" id="guessField" class="input">
        <br><br>
        <button id="guessSubmit" onclick="checkGuess();" class="button">Submit</button>
    </div>
    <p id="guesses"></p>
    <p id="lastResult"></p>
    <p id="lowOrHi"></p>
</div>