JS函数参数自己重设
我正在尝试创建一个简单的问题答案“闪存卡”程序。用户用相反的语言键入单词的含义。一切工作正常,除了一件事:JS函数参数自己重设
当你点击按钮进入下一级,它工作正常。但是,当您输入正确的答案时,它会返回到第1级。为什么这是?下一个()函数级别参数重置自己回到1?请帮忙!
HTML:
</head>
<body>
<h1>Spanish</h1>
<div id="main">
<h1 id="topic_name">Subject Pronouns</h1>
<p>Type the word/phrase below in the opposite language</p>
<p>If there is an accent or ~ above a letter, put^before that letter. Example: diecis^eis</p>
<hr id="margin-bottom">
<h1 id="question"></h1>
<input id="answer_box"/>
<button id="next"></button>
<button id="answer">Show Answer</button>
</div>
</body>
</html>
JS:
$(document).ready(function(){
var lvl1=
[
[["I"],["yo"]],
[["you (formal)"],["usted"]],
[["you (informal)"],["t^u"]],
[["he"],["^el"]],
[["she"],["ella"]],
[["we (masculine)"],["nosotros"]],
[["we (feminine)"],["nosotras"]],
[["you all (formal)"],["ustedes"]],
[["you all (informal)"],["vosotros"]],
[["they (masculine or mixed)"],["ellos"]],
[["they (feminine)"],["ellas"]],
];
var lvl2=
[
[["yo"],["I"]],
[["usted"],["you (formal)"]],
[["t^u"],["you (informal)"]],
[["^el"],["he"]],
[["ella"],["she"]],
[["nosotros"],["we (masculine)"]],
[["nosotras"],["we (feminine)"]],
[["ustedes"],["you all (formal)"]],
[["vosotros"],["you all (informal)"]],
[["ellos"],["they (masculine)"]],
[["allas"],["they (feminine)"]],
];
var lvl3=
[
[["yo soy"],["I am"]],
[["tú eres"],["you (informal) are"]],
[["él es"],["he is"]],
[["ella es"],["she is"]],
[["usted es"],["you (formal) are"]],
[["nosotros somos"],["we are"]],
[["vosotros sois"],["you all (informal) are"]],
[["ellos/ellas son"],["they are"]],
[["ustedes son"],["you all (formal) are"]],
];
var lvl4=
[
[["I am"],["yo soy"]],
[["you (informal) are"],["t^u eres"]],
[["he is"],["^el es"]],
[["she is"],["ella es"]],
[["you (formal) are"],["usted es"]],
[["we are"],["nosotros somos"]],
[["you all (informal) are"],["vosotros sois"]],
[["you all (formal) are"],["ustedes son"]],
];
next(1);
function next(level){
random=(Math.floor(Math.random()*10));
switch(level){
case 1:
question=lvl1[random][0];
answer=lvl1[random][1];
$('#next').text("Level 2");
break;
case 2:
question=lvl2[random][0];
answer=lvl2[random][1];
$('#next').text("Level 3");
break;
case 3:
random=(Math.floor(Math.random()*9));
question=lvl3[random][0];
answer=lvl3[random][1];
$('#next').text("Level 4");
break;
case 4:
var random=(Math.floor(Math.random()*8));
question=lvl4[random][0];
answer=lvl4[random][1];
$('#next').text("Done");
break;
default:
alert("switch error");
}
$('#question').text(question);
$('#answer_box').keyup(function(){
if($(this).val()==answer){
$('#answer_box').attr("placeholder","");
$('#answer_box').val("");
next(level);
}
});
$('#next').click(function(){
next(level+1);
});
$('#answer').click(function(){
$('#answer_box').attr("placeholder",answer);
});
}//function next
});//end
CSS:
#main{
border:3px solid blue;
height:500px;
width:600px;
top:50%;
left:50%;
position:fixed;
margin-top:-230px;
margin-left:-300px;
border-radius:5%;
}
h1{
text-align:center;
}
p{
text-align:center;
}
#margin-bottom{
margin-bottom:80px;
}
#next{
display:block;
margin:0 auto;
}
#answer_box{
display:block;
margin:0 auto;
margin-bottom:20px;
}
#answer{
display:block;
margin:0 auto;
}
该问题未能声明变量并且意外创建闭包。
question=
和answer=
正在创建相同名称的窗口属性,因为它们尚未声明。
level
是功能next
正式参数,首先由next(1)
的点击函数声明为嵌套职能范围内next
和访问存储在级别参数的值的语句设置为1
(创建关闭时next()
返回)。每次调用next
时,它们也会重新应用到按钮元素。
建议的解决方案:在“准备就绪”IIFE内声明question
answer
和level
变量。在调用next
之外声明并应用一次按钮事件处理程序。使用显式代码维护level
。
更新与细节:
删除
next(1);
而且随着变量定义和未来()的调用不带参数的替换。级别在下一个功能之外被维护。
var question = "";
var answer = "";
var level = 1;
next();
从function next(level)...
卸下等级参数,并用
function next(){
random=(Math.floor(Math.random()*10));
switch(level){
case 1:
question=lvl1[random][0];
answer=lvl1[random][1];
$('#next').text("Level 2");
break;
case 2:
question=lvl2[random][0];
answer=lvl2[random][1];
$('#next').text("Level 3");
break;
case 3:
random=(Math.floor(Math.random()*9));
question=lvl3[random][0];
answer=lvl3[random][1];
$('#next').text("Level 4");
break;
case 4:
var random=(Math.floor(Math.random()*8));
question=lvl4[random][0];
answer=lvl4[random][1];
$('#next').text("Done");
break;
default:
alert("switch error");
}
$('#question').text(question);
}// end of function next body
这在很大程度上是因为代码发布相同的替换,但移动KEYUP和下一步按钮搬运者遵循function next
主体;不要在它里面定义它们:
$('#next').click(function(){
level = level + 1; // increase level
next();
});
$('#answer_box').keyup(function(){
if($(this).val()==answer){
$('#answer_box').attr("placeholder","");
$('#answer_box').val("");
next(); // stay on current level
}
});
我还没有把代码来处理发生了什么,当你点击时,“完成”正显示出下一步按钮。您询问的关闭是通过注册在next
函数中创建的键控和单击处理程序匿名函数创建的:匿名函数在next
内查找变量和参数定义,对应于创建匿名函数时的值。如果您不熟悉这个概念,请在javascript中搜索关闭。
谢谢,但我有一些问题:1)如果我把按钮点击函数放在next()函数之外,那么#next click函数如何知道下一级应该进入哪个级别传递给next())?或者#answer click功能如何知道显示的是什么答案?他们需要的这些变量不在他们的范围之内。这是你明确的代码是什么意思? 2)当你说next()返回“创建闭包”时,你是什么意思? –
请参阅[本社区wiki](http://*.com/a/111111/1848578)了解关闭的信息。 – qxz
哇,非常感谢您的详细解答!在'next'函数之外定义这些变量的概念,然后在内部对它们做**的东西将帮助我在未来的许多项目中。我开始更全面地理解继承和面向对象编程。 –
每次调用一个函数会为#下一个注册事件,#answer_box和“#的答案,你确定这是你想要的吗?只是因为这将是一个问题,你的问题是不是所有
我没有在任何地方看到“水平”? –
level是next()函数的参数,我最初传入的是1。我可以不使用它作为函数中的变量吗? –