javascript - if else 循环和 jquery 在热或冷应用程序中不起作用

Question

我为热应用程序或冷应用程序编写了 JavaScript，但在检查用户的猜测是热还是冷并将文本返回到反馈 ID 的循环方面遇到了问题。单击“新游戏”按钮时重置所有内容的功能也不起作用。让我来分解一下:

1. 在 checkGuess 函数中，输入第一个猜测后，将适当文本(“Hot”“Cold”等)返回到反馈 ID 中的第二个 if..else 循环不起作用。对于任何后续猜测，反馈 ID 中的文本不会更改。

2. 点击新游戏按钮时重新设置游戏的功能不起作用。我不想刷新页面来重新设置游戏。目前，当您单击新游戏按钮时，不会发生任何事情。

HTML 和 JS 代码如下。我这里还有一个带有 CSS 的 codepen:http://codepen.io/elisamarie/pen/grXdJN

HTML

        <header> <!--Header -->

            <!-- Top Navigation -->
            <nav> 
                <ul class="clearfix">
                    <li><a class="what" href="#">What ?</a></li>
                    <li><a class="new" href="#">+ New Game</a></li>
                </ul>
            </nav>

            <!-- Modal Information Box -->
            <div class="overlay" id="modal">
                <div class="content">
                    <h3>What do I do?</h3>
                    <div>
                        <p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
                        <ul>
                            <li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
                            <li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
                            <li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
                        </ul>
                        <p>So, Are you ready?</p>
                        <a class="close" href="#">Got It!</a>
                    </div>
                </div>
            </div>

            <!-- logo text -->
            <h1>HOT or COLD</h1>

        </header>

        <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>
        <!-- JavaScript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

JavaScript

var number = generateNumber();
var count = 0;

// return generated random number
function generateNumber() {
  return Math.floor(Math.random() * 100) + 1;
}

// returning user's guess
function getGuess() {
    return document.getElementById('userGuess').value;
}

// validate user's guess and return hot or cold
function checkGuess() {
  var guess = getGuess(); 
  var difference = 0;

  console.log(guess);

  if (guess === number) {
    return $("#feedback").text("You win!"); // if guess is the same as random number, you win!
  } else if (guess > number) {
    difference = guess - number; // calculate difference if guess is great than number
  } else if (guess < number) {
    difference = number - guess; // calculate different if guess is less than number
  }

  console.log(difference);

  if (difference >= 1 && difference <= 5) {
    $("#feedback").text("On fire!"); // if calculated difference is 1-5 away from guess, you're close
  } else if (difference > 5 && difference <= 15) {
    $("#feedback").text("Hotter!"); // if diff btwn 6 and 15, hotter
  } else if (difference > 15 && difference <= 30) {
    $("#feedback").text("Hot"); // if between 15 and 30, hot
  } else if (difference > 30 && difference <= 45) {
    $("#feedback").text("Warm"); // if between 30 and 45, warm
  } else if (difference > 45 && difference <= 65) {
    $("#feedback").text("Cold"); // if between 45 and 65, cold
  } else if (difference > 65) {
    $("#feedback").text("Freezing"); // if difference is over 65, freezing
  }
}

// count number of guesses
function countGuess() {
  count++; // increse count by 1
  $('#count').text(count); // add text to #count id
}



$(document).ready(function() {

  /*--- Display information modal box ---*/
  $(".what").click(function() {
    $(".overlay").fadeIn(1000);

  });

  /*--- Hide information modal box ---*/
  $("a.close").click(function() {
    $(".overlay").fadeOut(1000);
  });

  // start new game

  $("#guessButton").click(function() { //when guess button is clicked do these things
    var guess = getGuess(); // define variable and guess user enters
    // var number = generateNumber(); //  can you define a variable as a function???
    var listGuess = '<li>' + guess + '</li>'; // listGuess is user's guess with some list tags
    $('#guessList').append(listGuess); // add user's guess to the list
    $('#userGuess').val(''); // empty user guess field so they can add a new guess
    countGuess(); // run countguess function
    checkGuess(); // pass user's guess through checkguess function
  });


  // reset game

  $(".new").on('click', function(e) {// when new game button is clicked do the following
    e.preventDefault();
    // Empty Guesses
    $('#guessList').innerHTML = ""; // empty listguess field
    // Reset Guess number on page
    $('#count').text = "0";
    //Reset Guess Count in javascript
    count = 0;
    // Feedback needs to equal Guess
    $('#feedback').innerHTML = "Make your Guess!";
    // Generate New Random Number
    number = generateNumber(); //generate a new random number
  });

});

Answer 1

在使用 $('#userGuess').val('') 清除字段中的值后，就会调用 checkGuess。在调用 checkGuess 之后，将该清除代码放在事件处理程序的末尾。

您还可以在 if (guess === number) 行上比较一个字符串(getGuess 的结果，它来自 >输入(始终是一个字符串)，存储在guess中)和一个数字(number)，该数字始终返回false.在 getGuess 中，您需要添加对 parseInt 的调用，以将该字符串转换为数字。这是我的 getGuess 版本:

function getGuess() {
    return parseInt($('#userGuess').val(), 10);
}

您还使用了 jQuery 和 native DOM 操作的奇怪组合，例如在 getGuess 中，您使用 document.getElementById('userGuess').value，为什么不是$('#userGuess').val()？这样的例子还有不少。