elseループとjqueryがホットアプリまたはコールドアプリで動作しない場合

Question

ホットアプリまたはコールドアプリ用のJavaScriptを作成しましたが、ユーザーの推測がフィードバックIDにテキストを返すのが暑いかどうかをチェックするループに問題があります。 「新しいゲーム」ボタンがクリックされたときにすべてをリセットする機能も機能しません。私はそれを打破してみましょう：checkGuess機能で

1. 、フィードバックIDにapprioriateテキスト（「ホット」「コールド」など）を返す二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の呼び出し後に、イベントハンドラの最後にクリアコードを挿入します。

あなたは、文字列（常に文字列であるinput（）の値から来てguessに格納されているgetGuessの結果、）と番号（number）を比較するラインif (guess === number)に、またです常にfalseを返します。 getGuessでは、その文字列を数値に変換するためにparseIntへの呼び出しを追加する必要があります。これはgetGuessの私のバージョンです：

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

また、なぜない$('#userGuess').val()、例えばgetGuessにあなたがdocument.getElementById('userGuess').valueを使用し、jQueryとネイティブのDOM操作の奇妙な組み合わせを使用していますか？これにはかなりの例があります。