javascript - JS函数参数自行重置-6ren

javascript - JS函数参数自行重置

转载作者：行者123 更新时间：2023-12-02 14:10:38

25

4

我正在尝试创建一个简单的问答“闪存卡”程序。用户输入该单词在相反语言中的含义。一切工作正常，除了一件事:

当您单击按钮进入下一个级别时，它工作正常。然而，当你输入正确答案时，它又回到第一级。这是为什么呢？ next() 函数 level 参数是否将自身重置回 1？请帮忙!

fiddle

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 的形式参数首先设置为1通过声明next(1)

点击函数在 next 中声明为嵌套函数并访问存储在 level 参数中的值(当 next() 返回时创建一个闭包)。它们每次也会重新应用于按钮元素next被调用。

建议的解决方案:声明 question answer和level “就绪”IIFE 中的变量。在 next 调用之外声明并应用按钮事件处理程序一次。维护level使用显式代码。

<小时/>更新详细信息:

删除

 next(1);

并替换为变量定义和不带参数的 next() 调用。级别在下一个函数之外保持。

var question = "";
var answer = "";
var level = 1;
next();

从 function next(level)... 中删除 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 后面 body ;不要在其中定义它们:

$('#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 内创建的 keyup 和 click 处理程序匿名函数来创建的。函数:匿名函数在 next 内查找变量和参数定义，对应于创建匿名函数时它们的值。如果您不熟悉这个概念，请搜索 javascript 中的闭包。

关于javascript - JS函数参数自行重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39628590/

25

4

0

文章推荐： javascript - 将 Javascript 转换为 PHP 回显以插入 PHP 条件语句

文章推荐： javascript - Vue 更新 v-for 属性

文章推荐： JavaScript 二进制归约函数 : why is 16 + 0 returning 0?

文章推荐： javascript - 如何将 D3 sunburst 序列分区更新到 v4？

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

javascript - JS函数参数自行重置