javascript冷热游戏

我正在制作一个应用程序，将随机生成的数字与用户输入的数字进行比较。从那里，应用程序通过“更热”和“更冷”提示引导用户。我很接近，但现在我的问题是提示在显示大约1秒后消失。我希望“更热”或“更冷”提示保持可见，直到用户输入另一个数字

以下是该应用程序的链接：

以下是我的javascript代码：

$(document).ready(function () {

var answer = Math.floor((Math.random() * 100) + 1);
console.log("The secret number is: " + answer);
var numberOfGuesses = 0;
var guesses = [];
var distance = null;
var previousDistance = null;

function getGuess() {
    $("#submit").click(game);
    $("#guess").keydown(function (enter) {
        if (enter.keyCode == 13) {
            game();
        }
    });
}

getGuess();

function game() {
    var guess = parseInt($('#guess').val());
    if (guess !== null && $.isNumeric(guess) && (1 < guess < 101)) {
        $('#guess').val('');
        numberOfGuesses += 1;
        guesses.push(guess);
        distance = Math.abs(answer - guess);
        previousDistance = Math.abs(answer - guesses[guesses.length - 2]);
        if (guess === answer) {
            $('#hint').html('Congrats! You got it in ' + numberOfGuesses + ' attempts! The secret number was ' + answer);
        } else {
            console.log(guess, answer, previousDistance, distance);
            if (isNaN(previousDistance)) {
                if (guess > answer) {
                    $('#hint').html('Guess lower! Last guess: ' + guess);
                } else if (guess < answer) {
                    $('#hint').html('Guess higher! Last guess: ' + guess);
                }

            } else if (distance > previousDistance) {
                if (guess > answer) {
                    $('#hint').html('You\'re getting colder, guess lower! Last guess: ' + guess);
                } else if (guess < answer) {
                    $('#hint').html('You\'re getting colder, guess higher! Last guess: ' + guess);
                }
            } else if (distance < previousDistance) {
                if (guess > answer) {
                    $('#hint').html('You\'re getting hotter, guess lower! Last guess: ' + guess);
                } else if (guess < answer) {
                    $('#hint').html('You\'re getting hotter, guess higher! Last guess: ' + guess);
                }
            } else if (distance === previousDistance) {
                if (guess > answer) {
                    $('#hint').html('You\'re on fire, guess lower! Last guess: ' + guess);
                } else if (guess < answer) {
                    $('#hint').html('You\'re on fire, guess higher! Last guess: ' + guess);
                }
            } else {
                $('#hint').html('ERROR: Your guess must be a number between 1 and 100').css({
                    color: 'red'
                });
            }
        }
    }
    $('#newgame').click(function (e) {
        e.preventDefault();
        answer = Math.floor((Math.random() * 100) + 1);
        console.log(answer);
        numberOfGuesses = 0;
        guesses = [];
        distance = null;
        previousDistance = null;
        $('#hint').html('');
        $('#guess').val('');
    });
}

$（文档）.ready（函数（）{
var answer=Math.floor（（Math.random（）*100）+1）；
console.log（“密码是：”+应答）；
var numberOfGuesses=0；
var猜测=[]；
var距离=null；
var-previousDistance=null；
函数getGuess（）{
$（“#提交”）。点击（游戏）；
$（“#猜测”）.keydown（函数（回车）{
如果（输入.keyCode==13）{
游戏（）；
}
});
}
getGuess（）；
函数游戏（）{
var guess=parseInt（$（'#guess'）.val（）；
如果（猜测！==null&&$.isNumeric（猜测）&&（1回答）{
$（'#hint'）.html（'Guess lower！Last Guess:'+Guess）；
}else if（猜测<回答）{
$（'#hint'）.html（'猜得更高！最后一次猜：'+Guess）；
}
}否则如果（距离>以前的距离）{
如果（猜测>回答）{
$（'#hint'）.html（'你越来越冷，猜得越低！最后一次猜：'+guess）；
}else if（猜测<回答）{
$（'#hint'）.html（'你越来越冷，猜得更高！最后一次猜：'+guess）；
}
}否则如果（距离<以前的距离）{
如果（猜测>回答）{
$（'#hint'）.html（'你越来越热，猜得越低！最后一次猜：'+guess）；
}else if（猜测<回答）{
$（'#hint'）.html（'你越来越热，猜得更高！最后一次猜：'+guess）；
}
}else if（距离===以前的距离）{
如果（猜测>回答）{
$（'#hint'）.html（'你着火了，猜低一点！最后一次猜：'+guess）；
}else if（猜测<回答）{
$（'#hint'）.html（'你着火了，猜高一点！最后一次猜：'+guess）；
}
}否则{
$（'#hint'）.html（'错误：您的猜测必须是1到100之间的数字'）.css({
颜色：“红色”
});
}
}
}
$（“#新游戏”）。单击（函数（e）{
e、 预防默认值（）；
答案=Math.floor（（Math.random（）*100）+1）；
控制台日志（应答）；
numberOfGuesses=0；
猜测=[]；
距离=零；
previousDistance=null；
$（'#hint'）.html（''）；
$（'猜'）.val（''；
});
}

---

}))

实际问题在HTML中。您有一个提交按钮，它是表单的一部分。单击“提交”时，它正在查找未指定的表单操作，因此正在重新加载页面

更改您的

标签，使您保持在同一页面上，方法如下：

<form id="myform">

为此：

<form id="myform" action="#">

或者更好，让JS函数返回

false

，这样提交就不会通过。

不要使用

按钮。单击时，表单将尝试触发

操作

属性中的任何内容，该属性将重新加载页面

你有很多选择

---

我只会使用

或

。然后在单击

按钮或
链接时触发事件。
表单执行其正常行为：将数据发布到服务器。您需要禁用该操作。您可以将“提交”按钮更改为普通按钮，使其不会表现为提交：


或者在表单中添加onsubmit：

您的表单正在定期提交。由于表单中没有任何action属性，因此它会将表单提交到当前页面。您需要的是使用javascript处理提交：

<form id="myform">

$('#myform').on('submit', game);
function game(event) {
    // your code goes here
    event.preventDefault();
}

通过这种方式，enter也将触发由javascript处理的post，而不仅仅是单击提交按钮。
在表单中添加
onsubmit=“return false”
。或者将submit按钮改为
type=“button”
，而不是
type=“submit”
。我想说的是，尝试进一步隔离问题，以获得合理的答案，但我猜普特凡德证明我错了；）