Question

我正在创建一个应用程序，将随机生成的数字与用户输入的数字进行比较。从那里，应用程序通过“更热”和“更冷”的提示引导用户。我很接近，但是我现在的问题是，显示约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('');
    });
}

}）;

Answer 1

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

更改您的<form>标记，以便通过以下方式更改您的位置：

<form id="myform">

到此：

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

甚至更好，使JS函数返回false，以便提交不会通过。

Answer 2

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

你有很多选择。

我只会使用<input type="button" />或<a href="#">Submit</a>。然后在点击button或link时触发活动。

Answer 3

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

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

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

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

Answer 4

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

<form id="myform">

并在您的javascript中：

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

以这种方式也输入将触发由javascript处理的帖子，而不是仅点击提交按钮。

javascript冷热游戏

4 个答案: