JQuery 按钮多次单击
JQuery button multiple clicks
我的html文件中有以下代码。
<input type="submit" value="Submit Guess" id="submit">
我的javaScript文件中有以下代码。每次我单击(#submit(按钮时,我都希望执行以下代码。 问题是它在我第一次单击按钮时执行,但之后不会执行。 如何在不刷新页面的情况下使每次单击按钮时执行以下代码? 提前感谢!
$(document).ready(function(){
$('#submit').click(function(){
event.preventDefault();
user_Input = $('#text').val();
history_Guess.push(user_Input);
$('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');
});
如果需要,请在下面发布完整的代码:
.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ben Levine | Guessing Game</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Ben Levine</h1>
<h2>Guessing Game</h2>
</header>
<div>
<section>
<form>
<p>Guess a number (1-100)</p>
<input type="text" name="guess" id="text"><br>
<div id="chances">
<p>You have 5 more chances</p>
</div>
<div id="hot_Cold">
<p>You are hot, but you need to guess higher</p>
</div>
<div id="direction">
<p>You are getting hotter/colder</p>
</div>
<div id="history">
<p>Previous Guesses: </p>
</div>
<input type="submit" value="Submit Guess" id="submit">
<input type="submit" value="Hint" id="hint"><br>
<input type="submit" value="Reset Game" id="reset">
</form>
</section>
<footer>
<p>© 2014 Ben Levine</p>
</footer>
</div>
<script src="javaScript/jquery-2.1.3.min.js"></script>
<script src="javaScript/application_2.js"></script>
</body>
</html>
javaScript:
var random_Number = Math.floor(Math.random()*101);
var user_Input = 0;
var max_Guess = 5;
var history_Guess = [];
$(document).ready(function(){
$('#submit').click(function(event){
event.preventDefault();
user_Input = $('#text').val();
history_Guess.push(user_Input);
$('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');
});
function status_Guess(){
if(random_Number===user_Input){
return Win();
}else if(Math.abs(random_Number - user_Input) < 10){
return "You are very Hot!"
}else if(Math.abs(random_Number - user_Input) < 25){
return "You are Hot!"
}else if (Math.abs(random_Number - user_Input) < 50){
return "You are cold!"
}else{
return "You are very cold!"
}
};
function repeat_Check(){
for (var i = 0; i<history_Guess.length; i++){
if (history_Guess[i]===user_Input){
return "You already guessed this number"
}
}
};
function above_Below(){
if (user_Input === random_Number){
return " Wow you are amazing!"
}else if (user_Input < random_Number){
return " Guess Higher!"
}else{
return " Guess Lower"
}
};
function check_Turn(){
if (history_Guess.length > max_Guess){
return "Game Over!!!"
}
};
function validate_Input(){
var numbers = /^[0-9]+$/;
if (user_Input.value.match(numbers)){
return true;
}else{
return false;
}
};
function reset_Game(){
new_Game();
};
function hotter_Colder(){
if (history_Guess.length>0){
if (Math.abs(random_Number - user_Input) < Math.abs(random_Number - history_Guess[history_Guess.length-1])){
return "Getting hotter"
}else{
return "Getting colder"
}
}else{
return "First Guess"
}
};
function Hint(){
return random_Number;
};
function Win(){
alert("Congratulation, you won the game")
};
});
这些元素
$('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');
如果再次单击"提交"按钮,则不再存在。试试这个:
$(function(){
// your other code here
$('#submit').click(function(){
history_Guess.push($('#text').val());
$('#chances').replaceWith("<p id='chances'> You have "+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').replaceWith("<p id='hot_Cold'>"+status_Guess()+above_Below()+'</p>');
return false;
});
真的,我不会替换任何东西。而是用 $(selcetor).html('code goes here');
覆盖 HTML 元素的内容。
$(function(){
// your other code here
$('#submit').click(function(){
history_Guess.push($('#text').val());
$('#chances>p').html('You have '+(max_Guess - history_Guess.length)+' chances left!');
$('#hot_Cold>p').html(status_Guess()+above_Below());
return false; // don't even use the event Object
});
$('#chances').replaceWith('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').replaceWith('<p>'+status_Guess()+above_Below()+'</p>');
您正在替换您的div chances
和 hot_Cold
,以便它们在您第二次单击时不存在,请将其更改为以下内容以替换div 的内容:
$('#chances').html('<p> You have '+ (max_Guess - history_Guess.length) + ' chances left!</p>');
$('#hot_Cold').html('<p>'+status_Guess()+above_Below()+'</p>');
>event.preventDefault();
不会做任何事情,因为您不会将event
作为参数传递。
改变:
$('#submit').click(function(){
自:
$('#submit').click(function(event){
相关文章:
- 单击按钮以等待单击按钮
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 当值更改时,在servlet中自动获取textarea值,无需单击按钮
- 单击按钮时循环浏览匹配的表
- 单击按钮后启动javascript提示
- 单击按钮时在灯箱中显示不同的内容
- 单击按钮时加载数据
- 如何在不需要单击按钮的情况下获取选项的值
- 单击按钮时显示随机字符串
- 在单击按钮前后禁用提交按钮
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 单击按钮时Div Increment
- 若单击按钮,则更改Javascript中的变量
- 单击按钮更改加载到表中的JSON文件
- 如何在单击按钮时显示2行1列的表格
- 单击按钮前运行事件
- 如何删除父表行时;删除“;在React JS中单击按钮
- 如何创建一个表并在单击按钮时插入此标签和文本字段
- JavaScript-onClick将按钮ID或单击按钮的文本传递给函数
- 如何在单击按钮时显示一个分区,同时隐藏另一个分区