为什么在数字有效的情况下会出现未定义?

我有这段代码来要求在td中显示一个数字。但是它不能正常工作。

用户应该只能输入一个介于func1中传递的最小值和最大值之间的值。而且这个数字必须是一个有效的数字。

如果满足这些条件,td应该显示用户输入的数字,否则应该再次出现提示,让用户输入一个有效的数字。

如果用户一开始就输入了一个有效的数字,例如在这种情况下,最小值是1,最大值是10,如果用户输入一个介于这两个值之间的数字,代码就会工作,用户输入的数字就会显示在td上。但是如果用户输入数字0,就会出现 “The value 0 is not valid “的信息,并再次出现提示,这是正确的。但是如果用户输入一个有效的数字,比如1,在td中就会出现undefined而不是1。

你知道为什么吗?

HTML

<tr>
    <td>Number</td>
    <td id="tdNumber"></td>
    <td>
        <button onclick="func1()">Add</button>
    </td>
</tr>

JS

let config = {
  numberX: NUMBER_X
}

function showConfig() {
  document.getElementById(TD_NUMBER).innerHTML = config.numberX;
}

function func1() {
  config.numberX = func2(1, 10, P_CONSTANT);
  showConfig();
}

function func2(min, max, p = P_CONSTANT) {
  var number = parseInt(prompt("Enter a number between " + min + "and " + max));
  if (!Number.isInteger(number)) {
    alert("The number " + number + " is not valid.");
    func1();
  } else if (number > max || number < min) {
    alert("The number " + number + " is not valid");
    func1();
  } else {
    return number;
  }
}

解决方案:

你写的方式是 func1func2他们可以无限次地呼叫对方。所以想象一下这种情况。

  1. func1() 被调用(调用这个 func1_A)
  2. func1_A 电话 func2() 来获取数字(这就是 func2_B)
  3. 用户输入无效号码。func2_B 又开始呼叫 func1 (func1_C)
  4. 这一新的调用 func1_C 电话 func2() 以获得一个新的号码(func2_D)
  5. 用户输入有效数字。func2_D 返回它。func1_C 将其分配给 numberX
  6. func1_C 返回,执行返回到 func2_B 一直在等待的。func2_B 没有什么可做的,所以它返回 undefined
  7. func1_A 获得 undefinedfunc2_B 并将其分配给 numberX

基本上,你让这些函数互相调用的事实会不断增加 新的 的堆栈的调用,其中 旧的 的要等上才能回来。而重要的是,旧的将会恢复–这意味着最后发生的永远是 func1 的最新返回值。func2,如果用户 曾经 输入了一个无效的数字,将被 undefined.


Pointy说的对:这是一种非常糟糕的格式,容易出现很多问题。这不是你应该追求的方法。至少你的代码不应该因为有不必要的递归函数调用而无谓地容易出现堆栈溢出错误。

你可以通过一个 while 循环。我也是一个有意义的名字的粉丝,和。func1func2 尽可能的远离意义,所以我重命名了这些函数。

const NUMBER_X = 10;
const P_CONSTANT = "???";
const TD_NUMBER = "tdNumber";

let config = {
  numberX: NUMBER_X
};

function showConfig() {
  console.log(document.getElementById(TD_NUMBER));
  document.getElementById(TD_NUMBER).innerHTML = config.numberX;
}

function setNumber() {
  config.numberX = getValidNumber(1, 10, P_CONSTANT);
  showConfig();
}

function getValidNumber(min, max, p = P_CONSTANT) {
  var isValid = false;
  var number;

  do {
     number = parseInt(prompt("Enter a number between " + min + " and " + max));
     if(!Number.isInteger(number)) {
        alert("The number " + number + " is not valid.");
     } else if(number > max || number < min) {
        alert("The number " + number + " is not valid");
     } else {
        isValid = true;
     }
  } while(!isValid);

  return number;
}
<table>
  <tr>
    <td>Number</td>
     <td id="tdNumber"></td>
    <td><button onclick="setNumber()">Add</button></td>
  </tr>
</table>

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何创建一个包含日期和时间的列表的pd.DatatimeIndex?

2022-9-9 5:52:16

未分类

javascipt es6迭代器懒惰评估在内存中是如何操作的?

2022-9-9 5:52:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索