-1

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

这是应用程序的链接：http ://dl.dropboxusercontent.com/u/91499081/HotOrCold/HotOrCold.html?guess=&submit=Submit

这是我的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('');
    });
}

});

4

4 回答 4

0

您的表单会定期提交。由于您的表单中没有任何操作属性，它会将您的表单提交到当前页面。你想要的是用javascript处理提交：

<form id="myform">

在你的 javascript 中：

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

这样，enter 也会触发一个由 javascript 处理的帖子，而不是仅仅点击一个提交按钮。

于 2013-11-11T20:27:25.457 回答
0

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

更改您的<form>标签以使您保持在同一页面上，方法是通过以下方式进行更改：

<form id="myform">

对此：

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

或者更好的是，让 JS 函数返回false，这样提交就不会通过。

于 2013-11-11T20:18:42.113 回答
0

不要使用<input type="submit" />按钮。单击它时，您的表单将尝试触发action属性中的任何内容，这会重新加载您的页面。

你有很多选择。

我只会使用<input type="button" />or <a href="#">Submit</a>。button然后在单击或时触发事件link。

于 2013-11-11T20:21:07.793 回答
0

您的表单执行其正常行为：将其数据发布到服务器。您需要禁用该操作。您可以将“提交”按钮更改为普通按钮，这样它就不会像提交一样：

<input type="button" name="submit" id="submit" class="button"/>

或者在您的表单中添加一个 onsubmit：

<form id="myform" onsubmit="return false">.

于 2013-11-11T20:21:39.207 回答