javascript - 尝试在我的无序列表框 jQuery 中打印消息

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()

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML.

您的代码将插入

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

.html()

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content.

您每次都会覆盖内容，因此请改用 .append()继续添加新元素，例如；

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