函數不會被調用而自己重置自己

-2

我想做一個猜數字遊戲。不幸的是，count/guessNo變量不斷重置自身，表明newGame函數正在過早結束。這似乎主要發生在從一個猜測號碼切換到另一個時。請不要建議對我的HTML進行更改;這是一個在線訓練營，我們需要使用提供的HTML。這是我的代碼。函數不會被調用而自己重置自己

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

     <title>Hot || Cold</title> 

     <!-- Meta Tags --> 
     <meta charset="utf-8"/> 

     <!-- Stylesheets --> 
     <link rel="stylesheet" href="styles/reset.css"> 
     <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="styles/style.css"/> 

     <!-- JavaScript --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 

    </head> 
    <body> 

     <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> 
    </body> 
</html>

$(document).ready(function(){ 
    $(".what").click(function(){ 
    $(".overlay").fadeIn(1000); 
    }); 

    $("a.close").click(function(){ 
     $(".overlay").fadeOut(1000); 
    }); 
    newGame(); 
}); 

//call newGame when user enters number and presses enter 

function newGame() { 
    var guessNo = 0; 
    var x = Math.floor(Math.random() * 100) + 1; 
    $('#guessButton').click(function(){ 
     guesser(x,guessNo); 
}); 
    $('.new').click(function(){ 
     newGame(); 
}); 
    } 

function guesser(x,guessNo) { 
    //jQuery 
    var guess = parseInt(document.getElementById("userGuess").value, 10); 
    var y = Math.abs(x-guess); 
    var r = ""; 
    //switch statement 
    if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) { 
     r = "please enter a number between 1 and 100"; 
    } 
    else if (y >= 50) { 
     r = "Ice cold"; 
    } 
    else if (y >= 30) { 
     r = "cold"; 
    } 
    else if (y >= 20) { 
     r = "warm"; 
    } 
    else if (y >= 10) { 
     r = "hot"; 
    } 
    else if (y >= 1) { 
     r = "very hot"; 
    } 
    else { 
     r = "correct!"; 
    } 
    guessNo += 1; 
    //jQuery 
    document.getElementById("feedback").innerHTML = r; 
    document.getElementById("count").innerHTML = guessNo; 
    console.log("guess = " + guess); 
    console.log("x = " + x); 
    console.log("y = " + y); 
    console.log("r = " + r); 
    return guessNo; 
    $('#guessButton').click(function(){ 
     guesser(x,guessNo); 
    }); 
}

來源

2015-01-26 Frank Tocci

guesser函數應該是newGame（）的一部分嗎？ – qubit 2015-01-26 21:33:16

這是正確的 – 2015-01-26 21:48:38

嗯你的函數和點擊事件的結構對我來說似乎有點奇怪（看起來他們都是newGame的主要組成部分）。將所有內容放入newGame（）中的好處是什麼？ – qubit 2015-01-26 23:18:56

解決。所以基本上，我遇到的問題是，我的原始代碼中的提交按鈕不斷重置整個頁面，而不是僅僅處理文本框中的信息。

HTML: 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

     <title>Hot || Cold</title> 

     <!-- Meta Tags --> 
     <meta charset="utf-8"/> 

     <!-- Stylesheets --> 
     <link rel="stylesheet" href="styles/reset.css"> 
     <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="styles/style.css"/> 

     <!-- JavaScript --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 

    </head> 
    <body> 

     <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/> 
       <!-- should not be submit --> 
       <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> 
    </body> 
</html> 

CSS: 

clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html { 
    width: 100%; 
    height: 100%; 
    background-color: #394264; 
} 

body { 
    position: relative; 
    width: 98%; 
    height: 96%; 
    margin: 0.8em auto; 
    font-family: 'Lato', Calibri, Arial, sans-serif; 
    background-color: #1F253D; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
} 

a { 
    text-decoration: none; 
    color: black; 
} 

ul li { 
    display: inline; 
} 

/*--------------------------------------------------------------------------------- 
    Header Styles 
---------------------------------------------------------------------------------*/ 

nav { 
    position: relative; 
    height: 10%; 
    padding: 1em; 
} 

nav ul li { 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 1.2em; 
} 

nav ul li:first-child { 
    float: left; 
} 

nav ul li:last-child { 
    float: right; 
} 

nav a { 

    color: #fff; 
} 

h1 { 
    font-weight: 900; 
    font-size: 3em; 
    padding: 0.8em; 
    color: #fff; 

} 

/*style for hidden modal*/ 
.overlay { 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    background: #e74c3c; 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    z-index: 1000; 
    display: none; 
} 

.content { 
    color: #fff; 
    background: #e74c3c; 
    position: relative; 
    height: auto; 
    width: 600px; 
    border-radius: 3px; 
    top: 15%; 
    margin: auto auto; 
    border: 1px solid rgba(0,0,0,0.1); 
} 

.content h3 { 
    margin: 0; 
    padding: 0.4em; 
    text-align: center; 
    font-size: 2.4em; 
    font-weight: 300; 
    opacity: 0.8; 
    background: rgba(0,0,0,0.1); 
    border-radius: 3px 3px 0 0; 
} 

.content > div { 
    padding: 15px 40px 30px; 
    margin: 0; 
    font-weight: 300; 
    font-size: 1.15em; 
} 

.content > div p { 
    margin: 0; 
    padding: 10px 0; 
    line-height: 2em; 
    text-align: justify; 
} 

.content > div ul { 
    margin-bottom: -30px; 
    padding: 0 0 30px 20px; 
    text-align: left; 
} 

.content > div ul li { 
    padding: 5px 0; 
    display: block; 
    list-style-type: disc; 
    line-height: 1.5em; 
} 

.content > div ul li strong{ 
    text-decoration: underline; 
} 

.content > div a { 
    font-size: 0.8em; 
    background: #1F253D; 
    color: #95a5a6; 
    padding: 0.5em 2em; 
    margin-bottom: 50px; 
    border-radius: 3px; 
} 

/*--------------------------------------------------------------------------------- 
    Game Section Styles 
---------------------------------------------------------------------------------*/ 

.game { 
    position: relative; 
    background-color: #394264; 
    width: 380px; 
    height: 380px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    margin: 0 auto; 

    box-shadow: rgb(26, 31, 52) 1px 1px, 
    rgb(26, 31, 52) 2px 2px, 
    rgb(26, 31, 52) 3px 3px, 
    rgb(26, 31, 53) 4px 4px, 
    rgb(26, 32, 53) 5px 5px, 
    rgb(27, 32, 53) 6px 6px, 
    rgb(27, 32, 54) 7px 7px, 
    rgb(27, 32, 54) 8px 8px, 
    rgb(27, 32, 54) 9px 9px, 
    rgb(27, 33, 55) 10px 10px, 
    rgb(27, 33, 55) 11px 11px, 
    rgb(28, 33, 55) 12px 12px, 
    rgb(28, 33, 56) 13px 13px, 
    rgb(28, 34, 56) 14px 14px, 
    rgb(28, 34, 56) 15px 15px, 
    rgb(28, 34, 57) 16px 16px, 
    rgb(29, 34, 57) 17px 17px, 
    rgb(29, 34, 57) 18px 18px, 
    rgb(29, 35, 58) 19px 19px, 
    rgb(29, 35, 58) 20px 20px, 
    rgb(29, 35, 58) 21px 21px, 
    rgb(29, 35, 59) 22px 22px, 
    rgb(30, 35, 59) 23px 23px, 
    rgb(30, 36, 59) 24px 24px, 
    rgb(30, 36, 60) 25px 25px, 
    rgb(30, 36, 60) 26px 26px, 
    rgb(30, 36, 60) 27px 27px, 
    rgb(31, 37, 61) 28px 28px; 

} 

h2 { 
    margin: 0 auto; 
    background: #cc324b; 
    padding: 1em 0.4em; 
    font-size: 1.5em; 
    font-weight: 400; 
    display: block; 
    line-height: 1em; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    color: #fff; 
} 

.game p { 
    margin-top: 0.5em; 
    font-size: 1.8em; 
    padding-bottom: 0.5em; 
} 

#count { 
    color: #f39c12; 
    font-weight: 700; 
    font-size: 1.5em; 
} 

input { 
    width: 300px; 
    height: 50px; 
    display: block; 
    padding: 0.8em 0; 
    margin: 0.8em auto 0; 
    background: #50597b; 
    color: #fff; 
    border: solid 1px #1f253d; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 

input.button { 
    background: #1F253D; 
    color: #95a5a6; 
    font-size: 2em; 
    padding: 0.2em; 
    -webkit-transition: background 1s ease-in-out; 
    -moz-transition: background 1s ease-in-out; 
    -ms-transition: background 1s ease-in-out; 
    -o-transition: background 1s ease-in-out; 
    transition: background 1s ease-in-out; 
} 

input.button:hover { 
    background: #e64c65; 
    color: #fff; 
    -webkit-transition: background 1s ease-in-out; 
    -moz-transition: background 1s ease-in-out; 
    -ms-transition: background 1s ease-in-out; 
    -o-transition: background 1s ease-in-out; 
    transition: background 1s ease-in-out; 
    cursor: pointer; 
} 

input.text { 
    text-align: center; 
    padding: 0.2em; 
    font-size: 2em; 
} 

input:focus { 
    outline: none !important; 
} 

::-webkit-input-placeholder { 
    color: #95a5a6; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: #95a5a6; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: #95a5a6; 
} 

:-ms-input-placeholder { 
    color: #95a5a6; 
} 

ul.guessBox { 
    height: 80px; 
    margin: 10px auto 0; 
    background: #11a8ab; 
    padding: 0.5em; 
    display: block; 
    line-height: 2em; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
    color: #fff; 
    overflow: auto; 
} 
ul.guessBox li { 
    display: inline; 
    background-color: #1a4e95; 
    padding: 0.3em; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    width: 95%; 
    margin: 0.2em; 
    color: #fff; 
} 

Javascript: 

$(document).ready(function(){ 
    $(".what").click(function(){ 
    $(".overlay").fadeIn(1000); 
    }); 
    gameState = {}; 
    $("a.close").click(function(){ 
     $(".overlay").fadeOut(1000); 
    }); 
    $('#guessButton').click(function(){ 
     guesser(); 
     console.log("test"); 
}); 
    $('.new').click(function(){ 
     newGame(); 
    }); 

}); 

function newGame() { 
    gameState.guessNumber = 0; 
    gameState.number = Math.floor(Math.random() * 100) + 1; 
} 

function guesser() { 
    //jQuery 
    event.preventDefault(); 
    var x = gameState.number 
    var guess = parseInt($('#userGuess').val()); 
    var y = Math.abs(x-guess); 
    var r = ""; 
    if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) { 
     r = "please enter a number between 1 and 100"; 
    } 
    else if (y >= 50) { 
     r = "Ice cold"; 
    } 
    else if (y >= 30) { 
     r = "cold"; 
    } 
    else if (y >= 20) { 
     r = "warm"; 
    } 
    else if (y >= 10) { 
     r = "hot"; 
    } 
    else if (y >= 1) { 
     r = "very hot"; 
    } 
    else { 
     r = "correct!"; 
    } 
    gameState.guessNumber ++; 
    document.getElementById("feedback").innerHTML = r; 
    document.getElementById("count").innerHTML = gameState.guessNumber; 
    console.log("guess = " + guess); 
    console.log("x = " + x); 
    console.log("y = " + y); 
    console.log("r = " + r); 
    //return guessNo; 
}

來源

2015-02-11 22:24:31

函數不會被調用而自己重置自己

回答

相關問題