Question

我正在创建一个猜谜游戏，由于某种原因，每个猜测的文字都没有显示出来。有人能指出正确的方向吗？

以下是代码：

HTML：

       <section class="game"> <!-- Guessing Section -->

            <h2 id="feedback">Make your Guess!</h2>

            <form>
                <input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
                <input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
            </form>

            <p>Guess #<span id="count">0</span>!</p>

            <ul id="guessList" class="guessBox clearfix">

            </ul>

        </section>

JS：

$("#guessButton").click(function(){
        var guess = $('#userGuess').val;
        if (guess == number) {
            $('#guessList').text("<li>You've guessed the number!!</li>");
        } else if (guess < number) {
            $('#guessList').text("<li>You'll need to go higher.</li>");
        } else if (guess > number) {
            $('#guessList').text("<li>"+"You'll need to go lower."+'</li>')
        }
    });

Answer 1

编辑有关语法错误，请参阅@Buzinas答案。

您使用的是.text()而不是.html()。

.text()

我们需要知道此方法会转义提供的字符串必要的，以便它能在HTML中正确呈现。

您的代码将会插入

<ul id="guessList" class="guessBox clearfix">
  &lt;li&gt;You'll need to go higher.&lt;/li&gt;
</ul>

.html()

当.html（）用于设置元素的内容时，任何内容都是在该元素中完全被新内容所取代。

您每次都会覆盖内容，而是使用.append()继续添加新元素，例如

$('#guessList').append($("<li>You'll need to go higher.</li>"));

Answer 2

1.你没有在js中定义'number';

2.您应该使用.val()来获取猜测数字;

3.猜测按钮的类型不应该提交;

4.使用.html()或.append()而不是.text();

<input type="button" id="guessButton" class="button" name="submit" value="Guess"/>
$("#guessButton").click(function() {
var number = 1;
var guess = $('#userGuess').val();
if (guess == number) {
$('#guessList').html("<li>You've guessed the number!!</li>");
} else if (guess < number) {
$('#guessList').html("<li>You'll need to go higher.</li>");
} else if (guess > number) {
$('#guessList').html("<li>" + "You'll need to go lower." + '</li>')
}

}）;

Answer 3

错误在这一行：

var guess = $('#userGuess').val;

使用jQuery时，设置属性的方法是using functions。如果你没有传递任何参数，它就是get函数，如果你通过，那么它就是set。所以你应该使用：

var guess = $('#userGuess').val();

试图在我的无序列表框jQuery中打印消息

3 个答案: