函数在不被调用的情况下不断重置自身
Function keeps resetting itself without being called
我正在尝试制作一个猜数字游戏。不幸的是,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);
});
}
已解决。所以基本上,我遇到的问题是原始代码中的提交按钮不断重置整个页面,而不仅仅是处理文本框中的信息。
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;
}
相关文章:
- 如何从模块链中调用函数.导出到节点中
- 调用函数内部的函数
- 在javascript中调用c函数
- DropDownListFor赢得't在更改时调用函数
- Javascript页面调用函数
- 在动画结束之前调用函数
- 允许父窗口在其不同域的子iframe上调用函数
- 运行Infinite Scroll后调用函数时出现问题
- JavaScript:在调用函数的文本输入上按enter键
- 使用大括号和不使用bracs调用函数的区别
- javascript在事件上调用函数
- 从index.html调用函数,该函数无限循环
- 从带参数的字符串变量调用函数中的函数
- 为什么 JS 不在滚动时调用函数
- 是否可以在不更改上下文的情况下调用函数.apply
- 如何在ES6类中使用参数调用函数
- AngularJS:调用函数时编号不更新
- JavaScript中的立即调用函数表达式(IIFE)-传递jQuery
- 在JavaScript中调用函数时自定义此选项
- 调用函数中声明的变量