Javascript 如何使用jQuery显示文本而不使其消失？

如何使用jQuery显示文本而不使其消失

当用户键入一个数字时。然后我想显示一条特定的消息-你热、冷、热等等。现在消息会在屏幕上闪烁，但我希望它保持不变，然后用户可以继续玩，直到他放弃并想显示随机数或重置游戏

html中唯一相关的东西是

    <div class="output-container">

    </div>

这就是我想要显示消息的地方

下面是application.js

// Hot or Cold JS game.
$(document).ready(function() {
    var randomNumber = Math.floor((Math.random() * 100 ) + 1);

    $('#Enter').click(function() {
        var guessNumber = document.getElementById('number');
        var difference = Math.abs(guessNumber - randomNumber);

        if (difference == 0) {
            // Display to user - "Perfect"
            $('.output-container').append('Perfect');
        } else if (difference < 5) {
            // Display to user - You're on Fire!
            $('.output-container').append('You are on Fire!');
        } else if (difference < 10) {
            // Display to user - Warm
            $('.output-container').append('Warm');
        } else if (difference < 30) {
            // Display to user - Ice Cold
            $('.output-container').append('Ice Cold');
        } else {
            // Display to user - You must be Frozen?
            $('.output-container').append('You must be Frozen!');
        };
    });

    // Start over
    $('#reset').click(function() {
        location.reload();
    });
    $('#show').click(function() {
        $('#show').hide();
        $('#append-number').append(randomNumber);
    });
});

//热的还是冷的JS游戏。
$（文档）.ready（函数（）{
var randomNumber=Math.floor（（Math.random（）*100）+1）；
$（'#Enter'）。单击（函数（）{
var guessNumber=document.getElementById（'number'）；
var差=Math.abs（猜测数-随机数）；
如果（差==0）{
//向用户显示-“完美”
$（'.output container'）.append（'Perfect'）；
}否则如果（差异<5）{
//向用户显示-您着火了！
$（'.output container'）.append（'您着火了！'）；
}否则如果（差值<10）{
//显示给用户-温暖
$（'.output container'）.append（'Warm'）；
}否则，如果（差异<30）{
//显示给用户-冰冷
$（'.output container'）.append（'Ice Cold'）；
}否则{
//向用户显示-您必须被冻结吗？
$（'.output container'）.append（'您必须被冻结！'）；
};
});
//重新开始
$（“#重置”）。单击（函数（）{
location.reload（）；
});
$（“#显示”）。单击（函数（）{
$（'#show'）.hide（）；
$（'#追加编号'）。追加（随机编号）；
});
});

确切地说，表单中有按钮，单击按钮可重新加载页面。将按钮类型更改为

按钮

：

<button type="button" ... >Enter</button>

但是，如果您不想将“输入”按钮用作提交按钮，请不要将其指定为提交按钮

---

请注意，您的代码还有其他问题，但这超出了本问题的范围

对Javascript的更改：

---

并将

#Enter

设为普通

type=“button”

或add

返回false位于
的末尾。单击（）
处理程序。否则它将继续提交和重新加载页面。
为什么您使用jQuery，而仍然使用
document.getElementById
？请做一个提琴：jsfiddle.net您是表单中的元素吗？当单击按钮时，您会意外地重新加载页面？因为我看不出文本不应该持续的原因。但是请注意，
guessNumber-randomNumber
肯定是错误的。不能从DOM元素中减去数字。应用程序当前在做什么？您没有解释它的任何行为，代码看起来很好，这取决于您的要求。。。。如果你不能说得更具体一些，人们将很难帮助你，如果他们能的话。是的，我认为某个地方的逻辑是错误的，因为同样的消息不断弹出。帮助是非常宝贵的，正如我所说的，你不能从DOM元素中减去一个数字。您必须首先获得该元素的值。演示非常有用。很高兴为您服务。哦，是的，在JS开头的
$（document.ready（）
-->

$（'#number'）。on（'keyup keypress'，function（e）{if（e.keyCode<48 | e.keyCode>57）返回false；}）将字符输入限制为仅数字。

$('#Enter').click(function(event) {
    event.preventDefault();

});

var guessNumber = document.getElementById('number').value;
...
// $('.output-container').append(...)  // BAD
$('.output-container').text(...)  //GOOD