Question

我有一个代码，用于检查用户输入的数字是否与随机生成的数字相同，但由于某种原因，我的输出会暂时显示并再次消失。如何使输出不消失？输出：

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

这是我的HTML：

<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;，或传递eventObject底部的eventObject.preventDefault()和checkGuess。请注意，如果使用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>

在javascript数字猜谜游戏中回答出现和消失

2 个答案: