递归提示函数returns null

Question

我想构建一个提示函数，该函数会提示直到用户输入一个值，然后 return 该值。

为什么我进入强制模式然后输入一个值时，这个代码returns null？任何人都可以让它工作吗？

function UserInput(text, defaultText, mandantory) {
  if (typeof defaultText === 'undefined')
    defaultText = '';
  if (typeof mandantory === 'undefined')
    return prompt(text, defaultText);
  else {
    var a = prompt(text, defaultText);
    if (a === '') {
      return UserInput(text, defaultText, mandantory);
    } else {
      return null;   
    }
  }
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <button onclick="alert(UserInput('prompt with input', ''))">prompt with input</button><br/>
  <button onclick="alert(UserInput('prompt with mandantory input', '', 0))">prompt with mandantory input</button>
 </body>
</html>

注意：必须从 onclick="..." 调用它。

谢谢，德扬

Answer 1

它 returns null 因为你叫你做 return null 如果 a 是 ''，你必须 return a.

function UserInput(text, defaultText, mandantory) {
  if (typeof defaultText === 'undefined')
    defaultText = '';
  if (typeof mandantory === 'undefined')
    return prompt(text, defaultText);
  else {
    var a = prompt(text, defaultText);
    if (a === '') {
      return UserInput(text, defaultText, mandantory);
    } else {
      return a;
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <button onclick="alert(UserInput('prompt with input', ''))">prompt with input</button><br/>
  <button onclick="alert(UserInput('prompt with mandantory input', '', 0))">prompt with mandantory input</button>
</body>

</html>

但我会在这里使用 while do while 循环而不是递归：

function UserInput(text, defaultText, mandantory) {
  if (typeof defaultText === 'undefined')
    defaultText = '';

  var a

  do {
    // the first prompt will always be called
    a = prompt(text, defaultText)
    // repeat the loop while  a === '' and mandantory !== 'undefined'
  } while (mandantory !== 'undefined' && a === '')

  return a;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <button onclick="alert(UserInput('prompt with input', ''))">prompt with input</button><br/>
  <button onclick="alert(UserInput('prompt with mandantory input', '', 0))">prompt with mandantory input</button>
</body>

</html>

Answer 2

这是 returning null 因为如果输入了一个值，你会在你的 else 中 returning 它。在你最后的 else 中你需要 return a 而不是 null，当 a 不同于 '':

if (a === '') {
  return UserInput(text, defaultText, mandantory);
} else {
  return a;   
}

注：

要检查一个变量是否被定义，你可以只使用if(mandatory)而不是写if(typeof mandantory === 'undefined').

演示：

function UserInput(text, defaultText, mandantory) {
  if (typeof defaultText === 'undefined')
    defaultText = '';
  if (mandantory)
    return prompt(text, defaultText);
  else {
    var a = prompt(text, defaultText);
    if (a === '') {
      return UserInput(text, defaultText, mandantory);
    } else {
      return a;   
    }
  }
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <button onclick="alert(UserInput('prompt with input', ''))">prompt with input</button><br/>
  <button onclick="alert(UserInput('prompt with mandantory input', '', 0))">prompt with mandantory input</button>
 </body>
</html>

Answer 3

在您的代码段中：

如果 a 不为零，则总是 return null 而它应该 return a
如果有 return 个语句，则不需要 else 分支
您可以使用默认参数
必填（打字错误）=> n
多个分支return应避免使用相同的值

您可以编写如下函数：

const UserInput = async (text, defaultText = '', mandatory = false) => {
  const result = await prompt(text, defaultText);
  
  if (!result && mandatory) {
    console.log('User did not enter a correct value, try again');
    return UserInput(text, defaultText, mandatory);
  }
  
  console.log(`Returning Value: "${result}"`);
  return result;
};

document
  .getElementById('test')
  .addEventListener('click', () => UserInput('Say Something', '', true))
;

<button id="test">Try</button>

Answer 4

你可以这样做

function UserInput(text, defaultText, mandantory) {
  if (typeof defaultText === 'undefined')
    defaultText = '';
  if (typeof mandantory === 'undefined')
    return prompt(text, defaultText);
  else {
    var a = prompt(text, defaultText);
    if (a === '') {
      return UserInput(text, defaultText, mandantory);
    } else if (a !== null) {
      return a;   
    } else {
      return null;   
    }
  }
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <button onclick="alert(UserInput('prompt with input', ''))">prompt with input</button><br/>
  <button onclick="alert(UserInput('prompt with mandantory input', '', 0))">prompt with mandantory input</button>
 </body>
</html>

递归提示函数returns null

Recursive prompt function returns null

javascript

variables

if-statement

prompt